微信瀏覽器視頻播放探索

背景和需求：

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/…