網頁視頻和音樂自動播放

微信瀏覽器中安卓沒法自動播放視頻，除此之外，媒體文件能夠在各大機型中實現自動播放

github

方案一：使用WeixinJSBridge

• ios能夠自動播放音樂和視頻
• 安卓中只能自動播放音樂
• 只支持微信瀏覽器

function autoPlay(id) {
      var audio = document.getElementById(id);
      if (window.WeixinJSBridge) {
        WeixinJSBridge.invoke(
          "getNetworkType",
          {},
          function(e) {
            audio.play();
          },
          false
        );
      } else {
        document.addEventListener(
          "WeixinJSBridgeReady",
          function() {
            WeixinJSBridge.invoke("getNetworkType", {}, function(e) {
              audio.play();
            });
          },
          false
        );
      }
      audio.play();

      return false;
    }
    autoPlay("video");

方案二：微信的wx.ready接口

• ios能夠自動播放音樂和視頻
• 安卓中只能自動播放音樂
• 只支持微信瀏覽器,而且須要微信受權wx.config()

wx.ready(function() {
       document.getElementById("video").play()
    });

方案三 document監聽第一次點擊事件

• ios和安卓均可以播放，但須要一次觸發條件
• 支持全部瀏覽器

function oneEvnet() {
document.removeEventListener("click", oneEvnet, false);
var audio = document.getElementById("video");
audio.play();
}
document.addEventListener("click", oneEvnet, false);

方案四 大招，詳見移動設備視頻適配

插件實現功能

• 解決播放視頻時不一樣設備的卡頓問題
• 同層播放器功能
• 非全屏播放，可操做菜單欄
• 安卓蘋果可自動播放視頻

相關注意事項 一、不是任何事件均可以觸發視頻播放的

有些IOS系統，若使用了 touchstart、scroll、swipe、touchend 等新型動做事件，是沒法觸發視頻的播放的。只應使用 click 或 tap 事件觸發網頁視頻的播放！

二、使用perload加強用戶的播放體驗 跟安卓版的微信不同，IOS系統只容許使用自家的瀏覽器引擎（安卓版的微信則都使用自家的X5引擎）。所以，微信網頁的視頻是不容許預加載的。但 IPhone 上的能夠。使用了 preload 屬性後，能夠有效解決用戶在點擊視頻時，頁面閃一下的問題。