网页视频不能自动播放？HTML5 video报错Uncaught (in promise) DOMException解决方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MczfeK94-1611632444545)(https://www.z01.com/UploadFiles/Anony/content/md/elbkemM3wu.jpg “在这里插入图片描述”)]

话说发哥四年前写了一个网页，如上图效果，实际网址http://pano.z01.com ，话说做好时是正常的，突然某一天，客户说你这个网站动画不见了，这是什么原因？
结果检查脚本一切正常。
其实也不是动画完全消失，关键是要用鼠标点击一下，才可以播放，否则autoplay效果无用，不能播放。

后来检查，原来是chrome的脚本机制变更造成的。
在F12调试中，会出出：

HTML5<video>报错Uncaught (in promise) DOMException

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

<video src="YOUR_VIDEO_URL" autoplay></video>

如果你用 javascript 代码显式调用play方法：

<video></video>
<script type="text/javascript">
    var vdo = $("video")[0]; //jquery
    vdo.src = "YOUR_VIDEO_URL";
    vdo.oncanplay = function(){
        this.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="YOUR_VIDEO_URL" autoplay muted></video>

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

document.body.addEventListener('mousedown', function(){
    var vdo = $("video")[0]; //jquery
    vdo.muted = false;
}, false);  

好了，我们来看看大厂的解决方案：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nxa6DSis-1611632444548)(https://www.z01.com/UploadFiles/Anony/content/md/x7SdeL8Yvm.jpg “在这里插入图片描述”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iUu8bkqv-1611632444551)(https://www.z01.com/UploadFiles/Anony/content/md/7gQBgwmS1P.jpg “在这里插入图片描述”)]

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

标签：视频,DOMException,用户,video,自动播放,Uncaught,报错,vdo,图片
来源： https://blog.csdn.net/zoomla_CMS/article/details/113176825