MP4video – Safari在控制台中显示“未处理的拒绝承诺:”
我有一组MP4video,当容器hover时会播放。 请参阅本页底部的3张图片进行演示:
https://ts133842-container.zoeysite.com/
这在Chrome中运行良好,但在Safari中,video无法播放,控制台在hover时显示错误。
未处理的承诺拒绝:[object DOMError]
我已经搜索了一个解决方案但是找不到修复方法。 请参阅下面的代码:
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问题。 我不知道为什么我无法在线找到有关此错误的更多信息。
这可能是目前Safarivideo播放自动播放video的问题(此时移动video中的自动播放是一个不断变化的世界,因此新版本可以带来新的行为)。
建立Safari的webkit.org建议不要假设任何媒体都会自动播放,因为浏览器通常也允许用户在此区域设置首选项。 他们的建议是检查并在必要时添加一个按钮或一些控件以允许用户播放video – 如果您查看下面给出的示例,您将看到它实际上正在查找您看到的错误:
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不播放video(或者更准确地说不显示正在播放的video)。 值得检查一下,看看这是否也有所不同,尽管上述检查仍然应该用作安全措施,即使它确实有效。
在您的情况下,添加了controls属性的结果HTML5将只是: