我有一组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问题。我不确定为什么为什么不能在线找到有关此错误的更多信息。

#1 楼

目前，这可能与Safari视频中自动播放视频的播放有关（目前，移动视频中的自动播放是一个日新月异的世界，因此新版本可以带来新的行为）。

该Webkit。 Safari是基于org建立的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>