liqvid icon indicating copy to clipboard operation
liqvid copied to clipboard

Player pauses when trying to play Video in iOS

Open anishg-cn opened this issue 2 years ago • 7 comments

The scenario is, there is a Video element which starts at, let's say, 5 second. So, the video plays fine for 5 seconds and suddenly it pauses and never starts again, until manually played again.

This happens in iOS Chrome (and maybe Safari as well).

I think the issue might be the following: image

@ysulyma can you please let me know how to fix this?

anishg-cn avatar Jan 13 '23 15:01 anishg-cn

I'll take a look!

ysulyma avatar Jan 14 '23 05:01 ysulyma

@ysulyma did you get time to look into the issue? it would be very helpful if you could check the issue as fast as possible.

anishg-cn avatar Jan 15 '23 15:01 anishg-cn

@anishg-cn not yet, will attempt to fix tomorrow evening

ysulyma avatar Jan 17 '23 03:01 ysulyma

@anishg-cn does your video have audio? If so, it is impossible to have it start playing without a user interaction (e.g. clicking), due to the Web Autoplay Policy. The recommended solution is to remove the audio track from the video and merge it with whatever <Audio> you're using (which should start at 0:00).

ysulyma avatar Jan 18 '23 05:01 ysulyma

@ysulyma but it works in android and pc, only issue in iOS?

anishg-cn avatar Jan 18 '23 05:01 anishg-cn

@ysulyma also user interacts by clicking the play button in the player, so shouldn't it work after that?

anishg-cn avatar Jan 18 '23 05:01 anishg-cn

@anishg-cn

  • Chrome and Firefox are more permissive about autoplay than iOS
  • in Safari, you can only call play() on the underlying <video> when the user clicks the play button in the player—not 5 seconds later.

Also note iOS can only play one channel of audio at a time so you'd need to do the audio extraction trick anyway. It may be possible to work around this using the Web Audio API, however that is complex and I haven't tried it yet. See the following:

  • https://developer.chrome.com/blog/autoplay/
  • https://matt-harrison.com/posts/web-audio/
  • https://www.remotion.dev/docs/player/player#numberofsharedaudiotags

ysulyma avatar Jan 19 '23 00:01 ysulyma