jQuery报错 Uncaught (in promise) DOMException: play() failed because the user didn‘t interact

八点玩转前端

已于 2022-08-13 11:45:30 修改

阅读量3w

点赞数 9

分类专栏： bug 文章标签： html5

于 2021-09-11 15:06:12 首次发布

本文链接：https://blog.csdn.net/weixin_45651609/article/details/120237623

版权

bug 专栏收录该内容

5 篇文章

订阅专栏

Chrome和基于Chromium的浏览器已禁止未经用户交互的音频和视频自动播放，以防止骚扰用户。视频可通过设置`muted`属性实现自动播放，如需声音，需用户互动后解除静音。大厂如优酷、爱奇艺采取用户点击播放策略，开发者应遵循此规则，提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。

<video id="app" controls="controls" src="xxx.mp4"></video>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    var video = $("#app")[0];
    video.play();
});
</script>

你将会在控制台看到如下异常：

引用内容
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

Firefox也有类似的异常提示：
引用内容
NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

这是因为，Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频。其实，严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频，而视频其实是不受限制的。但因为视频文件同样包含了音频，所以也一同被禁止了。Chrome这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。

既然知道了原因，那就开始找解决方法。

比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音:

复制内容到剪贴板程序代码

<video src="xxx.mp4" autoplay muted></video>

然后待用户在网页上有了任意触发后，再将muted去掉，或者让用户手动去打开音频（腾讯视频就是这样做的）：

复制内容到剪贴板程序代码
document.body.addEventListener(‘mousedown’, function(){
var vdo = $(“video”)[0]; //jquery
vdo.muted = false;
}, false);

好了，我们来看看大厂的解决方案：
优酷页面打开后视频不自动播放，需用户点击按钮才开始播放;爱奇艺页面打开后视频自动开始播放，但声音需用户手工开启，所以暂时不要去想什么hack的方法了，有办法这些大厂早用了，还是老老实实引导用户手工点一下吧。