美文网首页让前端飞Web前端之路JavaScript 进阶营
video audio标签,autoplay属性失效,不能自动播

video audio标签,autoplay属性失效,不能自动播

作者: 小光啊小光 | 来源:发表于2020-04-13 15:07 被阅读0次

    原因:浏览器为了更好的用户体验,关闭了自动播放功能。

    chrome可自动播放例外条件: 上面我们已经提到如果视频本身已经被设置为静音的情况下,那么浏览器将不会再拦截其加载进行自动播放。
    同时如果用户此前点击过自动播放的话那么下次再访问同样的网站,那么浏览器默认情况也不会拦截其播放,
    而在移动设备上如果用户选择将网站添加到主屏幕上也就是经常访问的网站,这种情况下同样可以自动播放。
    最后:根据谷歌统计数据如果网站视频被大量播放例如视频网站,这种情况下也不会被拦截掉自动播放功能。
    

    解决办法:

    1. 用户端chrome设置。(这方法我只在高版本浏览器上试过,并未有搜索到 Autoplay policy 选项。即使有用,对于前端程序员而言,没卵用。)

      在chrome 浏览器中输入:chrome://flags,搜索“Autoplay policy”,默认为“Default”,修改为 “No user gesture is required” 就可以了。
      
    2. muted静音的自动播放总是被允许的。

      <video muted src="" autoplay loop></video>
      
    3. android h5 webview

      // android 4.2 webview添加了是否需要用户手势去触发音视频的播放开关,默认为true(需要用户手势触发)。
      //将webview的这个开关设置为不需要用户触发:
      mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);
      
    4. IOS h5 webview

      IOS APP给webview设置mediaPlaybackRequiresUserAction后可以允许自动播放。
      
    5. 电脑端自动播放

      • 并未找到实现方案,腾讯的企鹅电竞同样在chrome下不自动播放。
      • github上相关的项目也都是16年之前的,通过监听touchstart来触发播放,但现在已经失效,与直接播放报同样的错误。
      • 参照‘企鹅电竞’:
        • 判断浏览器是否支持自动播放,true则自动播放,false则弹窗提示,点击弹窗触发播放。
        • 相关代码实现方案github上能搜到。

    相关文章

      网友评论

        本文标题:video audio标签,autoplay属性失效,不能自动播

        本文链接:https://www.haomeiwen.com/subject/jsogmhtx.html