html5 video微信瀏覽器視頻不能自動播放html
一.微信瀏覽器(x5內核):html5
1.不能自動播放android
2.全屏ios
3.最頂層(z層的最頂層)web
二.ios系統解決方案:(無phone手機未測試)api
<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;ide
2.經過js調用play();oop
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.白名單;