video标签自动播放问题

Jeff 发布于2019-08-26 10:47 / 1184人阅读

摘要：临时接了个非常紧急的首页开屏广告的活动，然后开始找源码开始该以前的活动每年偶尔会有几次这种活动都是直接套模板，然后因为相关人员都离职了，模板丢失，模板使用做的播放，但是有的浏览器判断有问题，比如某狐，然后因为播放一个大屏的广告视频，所以决定

临时接了个非常紧急的首页开屏广告的活动，然后开始找源码开始该以前的活动（每年偶尔会有几次这种活动都是直接套模板），然后因为相关人员都离职了，模板丢失，模板使用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可能加载各种视频，自动播放会有一定的不安全性。还有的说chrome怕声音突然出来，吓到你，不管是什么原因反正造成了以上问题反正就是不能播放

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

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

因为无法自动播放必须要求用户去主动触发播放才能播放，然后加上muted可以静音自动播放

可以给用户加一个静音按钮，然后这个静音做的功能是取消静音+播放

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

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106764.html

关于 video 播放的新探索

摘要：使用标签这是关于给出的基本用例。其实我们也是在这种背景下研究出来新的技术问题解决清晰度无缝切换的。这样之前说的所有成本问题都不存在，还能做到相同体验的无缝切换。所有代码来自带解析器能节省流量的西瓜播放器前端同学要使用 HTML5 播放器视频，必然会使用 video 标签，不过大多数同学只是使用了较简单的功能，其实它本身拥有不凡之力有待我们发现。首先，我们先来看下 video 最基础...

Shihira 2019-08-22 18:39 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

fyber 2019-08-23 12:57 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

UsherChen 2019-08-02 11:58 评论0 收藏0
手机浏览器自动播放视频video（设置autoplay无效）的解决方案

摘要：参考链接禁止自动播放后，有什么比较好的方法实现的自动播放吗微信自动播放视频可交互，设置层级，无控制条，非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出某一天接了个需求，需要在手机的H5页面内加入视频，我开开心心做完，准备交付的时候，问题来了，PM想要用户一进入页面，视频就开始播放，不需要用户手动点击。 2、尝试解决加autoplay 视...

Jinkey 2019-06-21 16:18 评论0 收藏0