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

4 浏览
0 Comments

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

我有一组MP4视频，当鼠标悬停在容器上时会播放。请在此页面底部查看演示的3张图片：\nhttps://ts133842-container.zoeysite.com/\n这在Chrome中运行得很好，但是在Safari中，视频无法播放，并且控制台显示在悬停时出现错误。\n

\n未处理的Promise拒绝：[object DOMError]\n

\n我已经搜索了解决方案，但还没有找到修复方法。请查看我的代码如下：\n

\n

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

\n有人可以解释一下为什么Safari会出现这个错误吗？非常感谢您提前的帮助。\n编辑：我现在注意到这在iPad或iPhone上也不起作用，所以不仅仅是桌面Safari的问题。我不确定为什么我在网上找不到更多关于这个错误的信息。

0

2 答案

0 Comments

2021年的解决方法是，在Javascript中放置一个AudioContext对象，并将其置于顶部或构造函数中。具体代码如下：

const AudioContext = window.AudioContext || window.webkitAudioContext;
this.ambience = new AudioContext();

此方法已在Safari 15和Chrome中进行了测试。

2022:

If you are experiencing the issue "Unhandled Promise Rejection: [object DOMError]" in Safari when trying to play an MP4 video, it is likely due to the autoplay policy changes introduced in Safari 15.

Previously, Safari allowed videos to be autoplayed without any user interaction. However, with the update, autoplay is now only allowed if certain conditions are met, such as the video being muted or the user having interacted with the website before.

To resolve this issue, you can do the following:

1. Make sure the video element has the "muted" attribute:

2. Add the "playsinline" attribute to the video element:

3. Ensure that the video is played after a user action, such as a click event:

document.getElementById("playButton").addEventListener("click", function() {
    var video = document.getElementById("video");
    video.play();
});

By following these steps, you should be able to resolve the "Unhandled Promise Rejection: [object DOMError]" issue in Safari when playing MP4 videos.

0
0 Comments

在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'属性时，它不会播放视频（或更准确地说，不会显示正在播放的视频）。检查一下是否有这个属性可能会有所帮助，尽管即使这样，上述检查仍应作为安全措施使用。

在您的情况下，添加了controls属性的结果HTML5代码如下：

0