Safari iOS 15 视频问题

Answer 1

只需将

video

标签包裹在

div

中即可。我猜您将

video

标签定位为

absolute

或

fixed

。这似乎有一个错误。定位包装器

div

fixed

/

absolute

而不是

video

元素似乎有帮助。为视频元素添加

background-color

也可能有帮助。

Answer 2

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

   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 3

您可以使用

setTimeout

修复黑屏，如下所示：

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

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压缩，并将

   SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary## Heading ##

   添加到.htaccess文件中，以免压缩.mp4文件。该解决方案适用于任何视频格式。

Answer 5

我使用 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 → 按预期工作。

版本详情： 铬 - 100.0.4896.75 野生动物园 - 15.4 Mac 操作系统 - 12.3.1

Answer 6

2024 签入：如果您遇到此问题，删除

preload

属性可能会修复它。

我在其他地方没有看到这个，希望这对某人有帮助。