Safari iOS 15 video issue-CodePudding

Since I downloaded iOS 15, the video on my page no longer works (in Safari). I used the following code to embed the video.

<video id="video" autoplay="true" loop="true" muted="true" playsinline="true">
    <source src="media/video.mp4" type="video/mp4">
</video>

If I deactivate "GPU Process: Media" in the Safari settings, everything works again as before.

Do I have to embed the video differently?

CodePudding user response：

I was doing some experiments on this and found that the video will start working when we do pause and play.

   const rVideo = document.getElementById("videoElement");
    if (rVideo) {
      rVideo.pause();
      rVideo
        .play()
        .then((res) => {
          console.log("playing start", res);
        })
        .catch((err) => {
          console.log("error playing", err);
        });
    }

It's not a perfect solution but a workaround to make it work.

CodePudding user response：

You can fix the black screen by using setTimeout as follows:

this.video.pause();
setTimeout(() => {
    this.video.play().then((res) => {
        console.log("playing start", res);
    })
    .catch((err) => {
        console.log("error playing", err);
    });
}, 0);