Safari iOS 15 视频问题

Question

自从我下载了iOS 15，我的页面上的视频在Safari中不再起作用。我使用以下代码嵌入视频。

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

如果我在Safari的设置中关闭"GPU Process: Media"，一切都会恢复正常。

我需要以不同的方式嵌入视频吗？

- wyssale1

---

这似乎是iPadOS和macOS中Safari 15的问题。我已经设法在我的情况下通过重新加载视频来源来解决它，但很想知道为什么首先会出现这个问题。 - Lee

Answer 1

只需将 video 标签包裹在 div 中即可。我猜测您将 video 标签定位为 absolute 或 fixed。这似乎存在一个错误。将包装器 div 的定位属性设置为 fixed/absolute 而不是 video 元素似乎有所帮助。还可以给视频元素设置 background-color。

- leonleonleon

Answer 2

我正在使用HTML Canvas元素作为视频源来发布视频。但是我一直得到的只是黑屏，有时候第一帧会加载出来，但最终还是黑屏。

我唯一明确设置的两个属性是playsinline和muted，以下是相应的代码片段：

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

渲染后，我最终得到以下结果：

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

但自从最新的操作系统更新后，问题似乎已经解决了。我在以下场景中测试了我的视频通话应用程序： Chrome → Chrome → 正常工作。 Chrome → Safari→ 正常工作。 Safari → Safari → 正常工作。

版本详细信息： Chrome - 100.0.4896.75 Safari - 15.4 Mac OS - 12.3.1

- Prabhat Singh

Answer 3

我在做一些实验，发现当我们暂停和播放时，视频会开始工作。

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

这不是一个完美的解决方案，但是一个权宜之计让它能够工作。

- Sanjeet kumar

Answer 4

您可以通过以下方式使用setTimeout来修复黑屏问题：

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

- YimaFeng

Answer 5

为了在iOS设备上正确播放视频，必须按照Apple的规定能够部分请求。因此，在托管视频的服务器上必须启用“字节范围支持”：https://discussions.apple.com/thread/4119538?page=2 由于有很多关于iPhone无法播放某些播客的投诉，现在苹果要求您托管媒体文件的服务器必须启用“字节范围支持” - 基本上这意味着需要处理一次仅请求文件的一部分，这是iPhone所需的。您应该与您的托管服务确认他们是否支持此功能：如果他们不支持（或不知道它是什么），则应找到另一个托管服务。

如果您正在使用Cloudflare作为CDN服务，并且服务器启用了gzip压缩，则“Accept-Ranges”标头不会被Cloudflare转发，视频无法正确提供：https://community.cloudflare.com/t/accept-ranges-and-content-length-headers-not-forwarded-by-cloudflare/41445/4

因此，有两个解决方案：

1. 完全在服务器上禁用gzip压缩。
2. 在服务器上启用gzip压缩，并将SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary## Heading ##添加到.htaccess文件中，以便不压缩.mp4文件。该解决方案适用于任何视频格式。

- Serhiy

---

你认为等待苹果发布修复程序是安全的吗？我会避免过度设计我们的应用程序来修复标准浏览器功能。 - a.barbieri