video标签自动播放问题

2024年2月18日 97次阅读 来源: 因为是下雨天

临时接了个非常紧急的首页开屏广告的活动，然后开始找源码开始该以前的活动（每年偶尔会有几次这种活动都是直接套模板），然后因为相关人员都离职了，模板丢失，模板使用flash做的播放，但是有的浏览器判断flash有问题，比如某狐，然后因为播放一个大屏的广告视频，所以决定用video标签来直接做，然后发现了以下问题（本文章仅在mac上发现这个问题，windows未尝试）

video标签加上自动播放autoplay发现在chrome、火狐浏等览器上都不会自动播放

 var id = "narnia"
 var videoUrl = "http://xxxxx.mp4"
 var width = "1280"
 var height = "680"
 var tempHtml = `<video id="homeVideo" width=${width} height=${height} src=${videoUrl} autoplay></video>`

查了好多原因，发现是浏览的问题，因为video可能加载各种视频，自动播放会有一定的不安全性。还有的说chrome怕声音突然出来，吓到你，不管是什么原因反正造成了以上问题反正就是不能播放

然后搜了一下解决方法，比如说去 chrome://flags/#autoplay-policy 设置成 no user gesture is required 就好了等等，我想说我一个用户还要去设置这个那你还写这个有什么用，用户只关心好不好用而已

然后最后在其他的答案中找到一项，在视频标签中加上 muted 就可以，然后尝试了一下的确是可以了，但是这个标签是静音，都静音了那我的自动播放其实也没啥用，然后查了各种其他解决办法问了好几个大神然后都没有其他办法，然后想了一下折中的办法：

  1. 因为无法自动播放必须要求用户去主动触发播放才能播放，然后加上muted可以静音自动播放
  2. 可以给用户加一个静音按钮，然后这个静音做的功能是取消静音+播放

  3. 为什么要加上播放呢，因为你加上muted随便自动播放了，但是你要把这个属性取消了，会再次回到暂停，立马取消播放

    function openVoice() {
    var videoPlayer = document.getElementById("homeVideo")
    videoPlayer.muted = false
    videoPlayer.play()
}

这个方法先去关闭静音，然后再调用了播放方法，这样就算是用户触发了播放就可以正常播放了，这样也算折中的解决了自动播放的问题，找了半天实在是没有找到其他办法，属在下才疏学浅，如果其他人有好的解决办法请指教！真心求教！！！

ps. 加上muted就可以自动播放，看来浏览器怕声音突然出来，吓到你这个还是挺接近的

    原文作者：因为是下雨天
    原文地址: https://segmentfault.com/a/1190000020073391
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞