player.play() doesn't work in iOS >= 14.5 (both Safari and Chrome)

[limonte]

Expected behaviour

It's possible to programmatically start playing video:

<div
  id="player"
  data-plyr-provider="youtube" 
  data-plyr-embed-id="so2s-NZVXZA">
</div>

const player = new Plyr('#player');
setTimeout(() => {
  player.play()
}, 3000)

Actual behaviour

The video doesn't start playing after player.play(). It shows buffering progress bar and gets stuck there:

https://user-images.githubusercontent.com/6059356/116820419-b02e0600-ab7d-11eb-8048-2e1044badd8e.MP4

Steps to reproduce

Open https://limonte.github.io/plyr-sandbox/ in iOS. There's setTimeout() which starts video 3 seconds after page load. It works everywhere except iOS.

Environment

• Browser: Safari and Chrome
• Operating System: iOS/ipadOS 14.5
• Version: latest

Link to where the bug is happening

https://limonte.github.io/plyr-sandbox/

[limonte]

Upd: it seems that the issue appeared only in latest iOS/ipadOS 14.5. In the previous release (14.4.x) everything was working as expected.

[Tigrecito]

we have exactly the same problem ... starting by code doesn´t work (only with youtube .. vimeo for example works)

[Ninos]

Same problem here since latest iOS-Update. Any fixes in progress? :-)

[limonte]

Still reproducible even after upgrading to iOS 14.6

[tomgiesbergen]

I encounter the same problem here since latest iOS-Update!

[Ninos]

Any news about that? :) Since iOS-update we cannot use buttons anymore to play videos... :/

[limonte]

The issue is also happening in iOS 15

[tomtang1122]

I encounter the same problem

[daverees4]

I'm having the same issue with a page with a playlist where the next track will need to be played programatically. Is there any update please? Thanks!

[richi-coder]

to all with this issue.. have you tested with/without low power mode? With vanilla js, I have experienced problems when trying to play or autoplay videos (even muted) in iOS, when using low power mode.