网页视频和音乐自动播放

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

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);

方案四 大招，详见移动设备视频适配

插件实现功能

• 解决播放视频时不同设备的卡顿问题
• 同层播放器功能
• 非全屏播放，可操作菜单栏
• 安卓苹果可自动播放视频

相关注意事项 1、不是任何事件都可以触发视频播放的

有些IOS系统，若使用了 touchstart、scroll、swipe、touchend 等新型动作事件，是无法触发视频的播放的。只应使用 click 或 tap 事件触发网页视频的播放！

2、使用perload增强用户的播放体验 跟安卓版的微信不一样，IOS系统只允许使用自家的浏览器引擎（安卓版的微信则都使用自家的X5引擎）。因此，微信网页的视频是不允许预加载的。但 IPhone 上的可以。使用了 preload 属性后，可以有效解决用户在点击视频时，页面闪一下的问题。

转载于:https://my.oschina.net/u/4079668/blog/3028159