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 进程：媒体”，一切都会恢复正常。

我必须以不同的方式嵌入视频吗？

Answer 1

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

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

这不是一个完美的解决方案，而是使其工作的解决方法。

Answer 2

您可以使用setTimeout修复黑屏，如下：

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

Answer 3

只需将video 标签包裹在div 中。我猜你定位你的video 标签absolute 或fixed。似乎有一个错误。定位包装器 div fixed/absolute 而不是 video 元素似乎有帮助。为视频元素提供background-color 也可能会有所帮助。

Answer 4

要在 iOS 设备上正确提供视频，视频必须能够按照 Apple 的规定进行部分请求。因此，必须在托管它们的服务器上启用“字节范围支持”：https://discussions.apple.com/thread/4119538?page=2

由于 iPhone 的投诉数量不 能够播放一些播客，Apple 现在需要你的服务器 托管您的媒体文件以启用“字节范围支持”- 基本上，这意味着只处理对文件的一部分的请求 时间，这是 iPhone 所必需的。你应该与你的确认 他们支持的托管服务：如果他们不（或不知道） 它是什么）你应该找到另一个托管服务。

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

因此有两种解决方案：

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