Safari iOS 15 视频问题

Question

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?

Answer 1

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.

Answer 2

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);

Answer 3

Just wrap the video tag in div. i'm guessing that you positioned your video tag absolute or fixed. There seems to be a bug with that. Positioning the wrapper div fixed/absolute instead of the video element seems to help. ( it might also help to give the video element a background color )

Answer 4

To be correctly served on IOS devices, the videos must be able to be requested even partially as specified by Apple. Therefore the 'byte-range support' must be enabled on the server on which they are hosted: https://discussions.apple.com/thread/4119538?page=2

Because of the number of complaints there have been of iPhones not being able to play some podcasts, Apple now require the server you host your media files on to have 'byte-range support' enabled - basically this means coping with requests for only part of a file at a time, which is required for the iPhone. You should confirm with your hosting service that they support this: if they don't (or don't know what it is) you should find another hosting service.

Also if you are using Cloudflare as a CDN service, and gzip compression is enabled on the server the 'Accept-Ranges' header is not forwarded by Cloudflare and the videos are not properly served: https://community.cloudflare.com/t/accept-ranges-and-content-length-headers-not-forwarded-by-cloudflare/41445/4

Therefore there are two solutions:

1. Completely disable gzip compression on the server.
2. Enable gzip compression on the server and add SetEnvIfNoCase Request_URI \\.mp4$ no-gzip dont-vary## Heading ## to the .htaccess file so as not to compress .mp4 files. The solution is applicable for any video format.

Answer 5

I am using HTML Canvas element as the video source to publish the video. All I have been getting is a black screen and sometimes the first frame loads but ends up with a black screen.

The only two attributes i have been setting explicitly are playsinline and muted , here is a snippet for the same:

var videoEl = document.createElement('video');
videoEl.srcObject = mediaStream;
videoEl.setAttribute('playsinline', '');
videoEl.muted = true;

and after the render I end up with the below:

<video autoplay muted playsinline src="..."></video>

But since the latest OS update, the issue seems to be fixed. I tested my video call application in the below scenarios: Chrome → Chrome → Working as expected. Chrome → Safari→ Working as expected. Safari → Safari → Working as expected.

Version details: Chrome - 100.0.4896.75 Safari - 15.4 Mac OS - 12.3.1