zoukankan      html  css  js  c++  java
  • html5 video微信浏览器视频不能自动播放

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

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

    1.不能自动播放

    2.全屏

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

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

    <audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.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://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
          <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> 
          <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.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.白名单;

     

     

  • 相关阅读:
    实例
    LR接口测试---webservices
    LR常用函数整理
    Codeforces Round #639 (Div. 2) A. Puzzle Pieces
    Codeforces Round #640 (Div. 4)全部七题
    POJ3177 Redundant Paths(e-DCC+缩点)
    洛谷P3469 [POI2008]BLO-Blockade(割点)
    洛谷P3275 [SCOI2011]糖果(缩点+拓扑序DP)
    POJ1236 Network of Schools(强连通分量)
    P3387 【模板】缩点(Tarjan求强连通分量)
  • 原文地址:https://www.cnblogs.com/zlp520/p/6410739.html
Copyright © 2011-2022 走看看