javascript - Cannot play video when page visibility changes in iOS Safari

Question

I now have videos(muted) in my web app. These videos are inside a react-slick, and I control the playback when switching slides. Everything works perfectly when the page visibility stays the same.

When tabs switch, the browser would pause the video. As I return to the tab, the video resumes in Chrome, while it freezes in iOS Safari. I want it resumes in iOS Safari as well.

I've tried the document visibilitychange event. But the video is still paused after I try to play it.

document.addEventListener('visibilitychange', () => {
  const video = this.videoDOMs[this.currentIndex];
  if (document.visibilityState === 'visible' && appUtils.isIOs()) {
    video.play(); // afterwards, video.paused is false but the video still freezes
  }
});

Lastly, my workaround is using video onpause event.

video.onpause = () => {
  if (!video.ended && document.visibilityState === 'visible' && appUtils.isIOs()) {
    video.play(); // video can play
  }
}

The workaround works but I still wonder why the visibility change event fails to resume the video. Any better solutions are pleased to hear.

question from:https://stackoverflow.com/questions/66059996/cannot-play-video-when-page-visibility-changes-in-ios-safari

Answer 1

Waitting for answers