微信H5同层播放器以及视频自动播放

iOS之前已经解决了视频播放默认全屏，且浮在页面最顶端的问题

playsinline

webkit-playsinline

这样就可以在视频之上进行一些操作，实现诸如弹幕、自定义播放控件等的效果。
但是安卓端却一直迟迟没有一种比较完美的解决方案，直到腾讯规范了H5同层播放器。
在安卓端启用H5同层播放器也是十分的简单：

x5-video-player-type="h5"

同时也可根据项目需要选择是否开启全屏的同层播放器：

x5-video-player-fullscreen="true"

有的时候因为视频的尺寸问题，设置全屏以后横向或者纵向会留有空边，此时再配合css属性：

object-fit:fill

这个属性是设置替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

另外近期有一种很流行的H5模式：一进入页面是一段很酷炫的视频，视频播放完毕后会有一个页面，上面承载一些业务需求的模块。这种H5大多数需要用到视频自动播放的功能，同样的，在iOS端已经有很多种hack方法解决（各种事件监听），网上有很多方法，这里记录了目前可用的两种。

第一种：使用微信的wx.ready事件，首先要引入一个js文件

<script src=" https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

页面里部署js代码：

function autoPlayAudio() {
    wx.config({
        // 配置信息, 即使不正确也能使用 wx.ready
        debug: false,
        appId: '',
        timestamp: 1,
        nonceStr: '',
        signature: '',
        jsApiList: []
    });
    wx.ready(function() {
        document.getElementById('media').play();//video标签id=media
    });
}
autoPlayAudio();

第二种:监听WeixinJSBridgeReady事件

var ua = navigator.userAgent;
var vi = document.getElementById('media'); document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
    if (ua.indexOf("iPhone") > 0) {
        vi.play();
    } else if (ua.indexOf("Android") > 0) {
        vi.play();
        if (vi.currentTime === 0) {
            alert('1');
            //这里的定时器你可以不需要，也可以变成你需要的事件，而且也不一定在这个位置，主要是里面的play
            vi.play();
        }
    }
});

然而不幸的是，安卓端目前还没有稳定可用的视频自动播放方案，所以在设计时需考虑添加一个播放按钮，或者将播放事件绑定在touchstart上来近似的达到想要的效果。