MP4 视频 - Safari 在控制台中显示“未处理的承诺拒绝：[object DOMError]”

Question

我有一组 MP4 视频，当容器悬停时将播放这些视频。请参阅本页底部的 3 张图片进行演示：

https://ts133842-container.zoeysite.com/

这在 Chrome 中效果很好，但在 Safari 中视频将无法播放，并且控制台在悬停时显示错误。

未处理的承诺拒绝：[object DOMError]

我已经寻找解决方案，但未能找到修复方法。请参阅下面我的代码：

<div class="video-container">
  <video loop muted preload="auto">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>

<div class="video-container">
  <video loop muted preload="auto">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>

有人可以分享有关 Safari 为何抛出此错误的任何见解吗？预先非常感谢您。

编辑：我现在注意到这在 iPad 或 iPhone 上不起作用，所以这不仅仅是桌面版 Safari 的问题。但是，我不确定为什么我无法在网上找到有关此错误的更多信息。

Answer 1

这可能是目前自动播放视频的 Safari 视频播放的问题（移动视频中的自动播放目前是一个不断变化的世界，因此新版本可以带来新的行为）。

Safari 所基于的 webkit.org 建议不要假设任何媒体都会自动播放，因为浏览器通常也允许用户在该区域设置首选项。他们的建议是检查并在必要时添加一个按钮或一些控件以允许用户播放视频 - 如果您查看他们下面给出的示例，您会发现它实际上正在寻找您看到的错误：

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

顺便说一句，当不包含属性“控件”时，Safari 在某些设备上似乎会出现问题，无法播放视频（或更准确地说，不显示正在播放的视频）。值得检查一下这是否也会产生任何影响，尽管上述检查即使有效，仍应用作安全措施。

在您的情况下，添加了控件属性的 HTML5 结果将是：

<div class="video-container">
  <video loop muted preload="auto" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>