video标签自动播放问题

2019-08-15

临时接了个非常紧急的首页开屏广告的活动,然后开始找源码开始该以前的活动(每年偶尔会有几次这种活动都是直接套模板),然后因为相关人员都离职了,模板丢失,模板使用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就可以自动播放,看来浏览器怕声音突然出来,吓到你这个还是挺接近的

原文链接:segmentfault.com

上一篇:小程序云开发实战问题1:没有找到可以构建的 NPM 包
下一篇:js中会改变原数组的一些方法
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部