javascript - MP4 视频 - Safari 在控制台中显示 "Unhandled Promise Rejection: [object DOMError]"

Question

我有一组 MP4 视频，当容器悬停时会播放。请查看本页底部的 3 张图片以获取演示:

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

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

Unhandled Promise Rejection: [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>

jQuery(".video-container").hover(hoverVideo, hideVideo);

function hoverVideo(e) {  
  jQuery('video', this).get(0).play();
  jQuery(this).find('.image-container').css('display', 'none');
}

function hideVideo(e) {
  jQuery('video', this).get(0).currentTime = 0;
  jQuery('video', this).get(0).pause();
  jQuery(this).find('.image-container').css('display', 'block');
}

有人可以分享关于 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
    });
}

顺便说一句，当不包含属性“controls”时，Safari 无法播放视频(或更准确地说，无法显示正在播放的视频)的某些设备似乎存在问题。值得检查一下这是否也有任何区别，尽管上述检查仍应用作安全措施，即使它确实有效。

在您的情况下，添加了 controls 属性的结果 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>