首页 > 其他 > 详细

chrome中video标签不能自动播放,autoplay属性失效

时间:2020-03-23 18:29:48      阅读:379      评论:0      收藏:0      [点我收藏+]

开发中遇到的问题,video标签设置了自动播放,但是在chrome中加载不播放。发现在控制台中为video执行play()是可以播放的。于是尝试页面加载完成后执行play(),控制台报错“Uncaught(in promise)DOMException:play()”

最后发现问题是chrome在66版本后禁止了audio和video的自动播放。

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

https://www.cnblogs.com/ygunoil/p/11766698.html

https://blog.csdn.net/vM199zkg3Y7150u5/article/details/80327178

解决:

因为我的需求恰好视频是无声的,所以对video设置了muted静音属性,因为实际上chrome限制的是音频的自动播放,静音的视频还是可以播放的。

更进一步:

如果确实有视频自动播放的需求又该怎么办呢?总结了一下网上各种方案。

方案一:在chrome 浏览器中输入:chrome://flags,搜索“Autoplay policy”,默认为“Default”,修改为 “No user gesture is required” 就可以了。(但这个需要用户去修改,大多情境下又是不合适的,而且我并没找到这一项

方案二:利用限制不严格的 iframe 标签播放一段几百毫秒的无声音频,iframe的onended/onload事件调用video.play()

方案三:利用用户鼠标移动等事件触发play()

方案四:设置静音播放,500ms后改变音量。比较推荐

chrome中video标签不能自动播放,autoplay属性失效

原文:https://www.cnblogs.com/voniu/p/12553732.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!