video标签自动播放问题

2019-08-15 admin

临时接了个非常紧急的首页开屏广告的活动,然后开始找源码开始该以前的活动(每年偶尔会有几次这种活动都是直接套模板),然后因为相关人员都离职了,模板丢失,模板使用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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72505.html

文章标题:video标签自动播放问题

相关文章
JavaScript实现滑动到页面底部自动加载更多功能
话不多说,请看代码: &#x2F;&#x2F;滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); &#x2F;&#x2F...
2017-03-17
javascript通过获取html标签属性class实现多选项卡的方法
本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &...
2017-03-27
layer弹出层中H5播放器全屏出错的解决方法
1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta c...
2017-03-16
JavaScript 常见安全漏洞和自动化检测技术
前言 随着 Web2.0 的发展以及 Ajax 框架的普及,富客户端 Web 应用(Rich Internet Applications,RIA)日益增多,越来越多的逻辑已经开始从服务器端转移至客户端,这些逻辑通常都是使用 JavaScri...
2017-03-29
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
jQuery实现自动滚动到页面顶端的方法
本文实例讲述了jQuery实现自动滚动到页面顶端的方法。分享给大家供大家参考。具体实现方法如下: $(&quot;.scroll&quot;).click(function(event) { &#x2F;&#x2F;prevent th...
2017-03-23
javascript如何操作HTML下拉列表标签
先给大家讲下大概实现思路,具体内容介绍请看下面。 判断select选项中 是否存在Value=&quot;paraValue&quot;的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除sele...
2017-03-29
Grunt入门教程(自动任务运行器)
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而...
2017-03-27
js实现Select列表内容自动滚动效果代码
本文实例讲述了js实现Select列表内容自动滚动效果。分享给大家供大家参考。具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调...
2017-03-29
js的flv视频播放器插件使用方法
使用非常简单,小伙伴们只要修改对应的参数即可,这里就不多废话了,直接奉上实例吧。 &lt;div class=&quot;txt1&quot;&gt; &lt;script type=&quot;text&#x2F;javascript&...
2017-03-24
回到顶部