微信浏览器视频播放探索

背景和需求：

iOS微信浏览器为Chrome内核，相关属性都支持，不支持x5同层播放；
Android微信浏览器为X5内核，一些属性标签如playsinline不支持。即x5的属性只在Android上生效。
此处总结一句，Android是大坑。
产品需求是微信朋友圈的广告投放（第一次做），视频+图文注册表单形式。
视频相关功能点：1️⃣进入页面即自动播放，2️⃣视频有全屏功能，3️⃣在播放倒数十秒或者退出全屏时视频下方的文字改变。

基本API和写法：

controls
autoplay 没用
poster 安卓不稳定
muted
timeupdate
currentTime
duration
play
pause
ended

<video id="myVideo" width="100%" src="./asset/videos/2.mp4" autoplay playsinline webkit-playsinline @timeupdate="textChange" x5-playsinline @x5videoexitfullscreen="exitFullscreen" @x5videoenterfullscreen="enterFullScreen" poster="../public//asset/images/pyqvideo/1.png"></video>
复制代码

1.全屏播放vs内联播放

默认全屏播放，除非直播类产品，一般需求是内联播放。安卓在点击视频播放按钮时会自动进入全屏播放。
iOS: 使用playsinline webkit-playsinline
Android：使用x5-playsinline 注意不与x5-video-player-type='h5' x5-video-player-fullscreen='true'一起使用

2.全屏事件监听

需要监听退出全屏事件，x5有x5videoexitfullscreen和x5videoenterfullscreen
iOS: x5的全屏事件只在Android上生效，iOS上无法监听全屏事件。
Android：开启同层播放器，使用x5videoexitfullscreen和x5videoenterfullscreen事件

3.自动播放

iOS：需要使用WeixinJSBridgeReady事件，iOS有效
Android：始终不能自动播放，需要引导用户手动触发

document.getElementById('myVideo').play();
document.addEventListener("WeixinJSBridgeReady", function (){
    document.getElementById('myVideo').play();
}, false)
//Android 安卓始终不能自动播放
document.addEventListener('touchstart', function () {
    document.getElementById('myVideo').play();
});
复制代码

4.实现：

iOS：基本全部实现，不能监听全屏事件
Android：兼容太差，video自身的api表现不稳定，可以监听全屏事件，2️⃣3️⃣实现，但，
①poster失效，导致一进入页面内联播放的视频是黑屏的，视频在播放前会带有视频的默认白色加圆圈播放按钮且背景是纯黑色，解决：加一层首帧遮罩，video宽度为1px，监听touchstart事件，用户触发时隐藏遮罩，放大并播放视频，显示控件。

//Android进入页面显示遮罩，避免video的黑屏，touch后放大video
if(platform.android) {
    document.addEventListener('touchstart', function () {
        $('#myVideo').css('width','100%')
        $('.masker').css({'position':'absolute', 'display':'none'})
        document.getElementById('myVideo').play();
    });
}
//methods中:
textChange: function() {
    var myVideo = document.getElementById('myVideo')
    // console.log(myVideo.currentTime, myVideo.duration)
    if(myVideo.currentTime > 0.1) { //Android 1px video有控件ui
        myVideo.controls = true
    }
    if(myVideo.currentTime >= myVideo.duration - 10 && myVideo.currentTime < myVideo.duration) {
        this.willChange = true
        return
    }
},
复制代码

②进入页面无法自动播放，解决：依然是在用户touchstart之后触发，但依然未生效（据说是版本高低问题），只在已处于播放过程中暂停时触发生效。

参考：

x5.tencent.com/tbs/guide/v… H5同层播放器接入规范
qbp.hzau.edu.cn/wcs/Upload/… 同层播放器 X5
zhaoda.net/2014/10/30/…