网页视频不能自动播放?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的方法了,有办法这些大厂早用了,还是老老实实引导用户手工点一下吧。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你遇到 "Uncaught (in promise) DOMException: The element has no supported sources." 的错误,这可能是由于播放的 HLS 视频是加密的,而浏览器或播放器不支持对该加密视频进行解密。在播放加密的 HLS 视频时,你需要使用相应的解密库来处理。 这里是一个在 UniApp 中播放加密 HLS 视频的代码示例: ```vue <template> <view> <video :src="videoUrl" :poster="poster" @play="onPlay" @pause="onPause"></video> </view> </template> <script> export default { data() { return { videoUrl: '', // HLS视频地址 poster: '', // 视频封面图地址 }; }, methods: { onPlay() { console.log('视频开始播放'); }, onPause() { console.log('视频暂停'); }, loadVideo() { const videoElement = this.$refs.video; const player = new Hls(); // 使用 Hls 解密库 player.loadSource(this.videoUrl); player.attachMedia(videoElement); player.on(Hls.Events.MANIFEST_PARSED, () => { videoElement.play(); }); }, }, mounted() { this.loadVideo(); }, }; </script> <style> video { width: 100%; height: 100%; } </style> ``` 在上面的示例中,我们使用 Hls.js(一个支持解密的 HLS 播放器库)来播放加密的 HLS 视频。你需要在项目中引入 Hls.js 库,并将视频的 HLS 地址赋值给 `videoUrl`,将视频的封面图地址赋值给 `poster`。 在 `loadVideo` 方法中,我们创建了一个 Hls 实例,并使用 `loadSource` 方法加载 HLS 视频源。然后,我们将 Hls 实例与 `<video>` 组件关联起来,通过 `attachMedia` 方法关联到 `<video>` 元素上。 在 `Hls.Events.MANIFEST_PARSED` 事件中,我们开始播放视频。 请确保你已正确引入 Hls.js 库,并按照需要替换视频的地址和封面图地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值