网页视频和音乐自动播放

微信浏览器中安卓没法自动播放视频，除此之外，媒体文件能够在各大机型中实现自动播放

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 属性后，能够有效解决用户在点击视频时，页面闪一下的问题。