12

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?

General Grievance
  • 4,555
  • 31
  • 31
  • 45
wyssale1
  • 129
  • 1
  • 1
  • 5
  • 1
    This appears to be an issue with Safari 15 in iPadOS and macOS too. I've managed to fix it in my case by reloading the video src, but interested to know why the issue occurs in the first place. – Lee Sep 28 '21 at 14:06

5 Answers5

4

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.

mrcendre
  • 1,053
  • 2
  • 15
  • 28
leonleonleon
  • 41
  • 4
0

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.

Sanjeet kumar
  • 3,333
  • 3
  • 17
  • 26
0

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);
Ruli
  • 2,592
  • 12
  • 30
  • 40
YimaFeng
  • 1
0

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.
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Serhiy
  • 16
  • 1
  • Do you believe it's safe to wait Apple releases a fix? I would avoid over engineering our applications to fix a standard browser feature. – a.barbieri Dec 13 '21 at 12:43
0

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

Prabhat Singh
  • 1
  • 2