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>

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

顺便说一句，在某些设备上似乎存在一个问题，即当不包含属性“控件”时，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>

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

1 个答案: