MP4视频 - Safari显示“未处理的承诺拒绝：[对象DOMError]”在控制台中 [英] MP4 Video - Safari Showing "Unhandled Promise Rejection: [object DOMError]" in Console

问题描述

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

I have a group of MP4 videos which will play when the container is hovered. Please see the 3 images at the bottom of this page for a demo:

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

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

This works great in Chrome, however in Safari the video will not play and the console is showing the error when hovering.

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

Unhandled Promise Rejection: [object DOMError]

我已经搜索了一个解决方案但是找不到修复方法。请参阅下面的代码：

I've searched for a solution but haven't been able to find a fix. Please see my code below:

<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会抛出此错误？非常感谢你提前。

Could anybody share any insight as to why Safari is throwing this error? Thank you very much in advance.

编辑：我现在已经注意到这在iPad或iPhone上不起作用，因此不仅仅是桌面Safari问题。我不知道为什么我无法在线找到有关此错误的更多信息。

I've now noticed that this doesn't work on an iPad or iPhone, so isn't just a desktop Safari issue. I'm not sure why I can't find more information about this error online however.

推荐答案

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

This may be an issue with Safari video playback of auto play videos at the moment (auto play in mobile video is an ever changing world at the moment so new releases can bring new behaviour).

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

The webkit.org, which Safari is built on, recommendation is to not assume any media will autoplay, as browsers often allow users set preferences in this area also. Their recommendation is to check and if necessary add a button or some control to allow the user play the video - if you look at the example they give below you will see it is actually looking for the error you see:

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不是当不包括属性控件时播放视频（或者更准确地不显示正在播放的视频）。虽然上述检查仍然可以用作安全措施，即使它确实有效，也值得检查一下。

As an aside, there seems to be an issue on some devices with Safari not playing a video (or more accurately not showing the video it is playing) when the attribute 'controls' is not included. It would be worth checking to see if this makes any difference also, although the above check should still be used as a safety measure even if that does work.

在你的情况下添加了controls属性的结果HTML5就是：

In your case the resulting HTML5 with the controls attribute added would just be:

<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]”在控制台中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！