首页技术博客 技术教程 正文

html5 video微信浏览器视频不能自动播放

2018-10-20 2280 0条评论


一.微信浏览器(x5内核):

1.不能自动播放

2.全屏

3.最顶层(z层的最顶层)

二.ios系统解决方案:(无phone手机未测试)

<audio preload="preload" controls id="car_audio" src="http://http://www.idcfu.com/kehulinkzamenjiehunba.mp3" loop></audio> 
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png"> 
      <source id="mp4" src="http://www.idcfu.com/kehulinktrailer.mp4" type="video/mp4"> 
      <source id="webm" src="http://www.idcfu.com/kehulinktrailer.webm" type="video/webm"> 
      <source id="ogv" src="http://www.idcfu.com/kehulinktrailer.ogv" type="video/ogg"> 
      <p>Your user agent does not support the HTML5 Video element.</p> 
</video> 
<!-- 必须加在微信api资源 --> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script> 
     //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 
     document.getElementById('car_audio').play(); 
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
    document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('car_audio').play(); 
        document.getElementById('video').play(); 
    }, false); 
</script>


三.android系统中解决方案:


误区:(无效的解决方案)

1.设置video属性autoplay;

2.通过js调用play();

3.通过js来触发click事件;

4.使用插件videojs;

5.通过js调用load()然后再调用play();

6.设置video属性webkit-playsinline="true";

7.touchstart监听;

8.stalled事件处理;

9.canplaythrogh事件处理;

10.readyState大于2的处理;

11.DOMContentLoaded监听;

12.微信js api中WeixinJSBridgeReady;

13.微信js api中getNetworkType;

14.白名单;


文章版权及转载声明

本文作者:符文浩 网址:http://blog.fuwenhao.com/post/164.html 发布于 2018-10-20
文章转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:

评论列表 (暂无评论,2280人围观)参与讨论

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码