H5實例教學--微信內嵌視頻1（案例淺析）

以上爲案例二維碼
首個H5案例解析
從頭開始分析

在 iOS 上，APP 都是使用的系統自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統一的，只須要考慮不一樣的 iOS 版本是否有不一致的地方。在 iOS 上，播放視頻默認會彈出一個播放器全屏播放視頻，以下效果

播放器上下有的系統默認的控制欄，能夠控制視頻的播放進度、音量以及暫停或繼續播放，播放視頻時，視頻會 「浮」 在頁面上，頁面上的全部元素都只能是在視頻下面，這種效果顯然不是咱們想要的。
但好在 iOS 10 Safari 中，video 新增了 playsinline 屬性，能夠使視頻內聯播放。(微信瀏覽器支持)

在 webkit 的 blog 上提到

A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline.

來源： http://www.cnblogs.com/zzsdre...
安卓實現：

TBS 內核（>=036849）支持一個叫 同層播放器 的視頻播放器，這個不須要申請白名單，只需給 video 設置兩個屬性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"，播放效果

結合IOS和安卓微信下同層播放器的實現代碼：

<video preload="load" data-link="http://wag.i-h5.cn/dj/wyf/video/wb.mp4"  playsinline x-webkit-airplay="true" webkit-playsinline
       x5-video-player-type="h5" x5-video-player-fullscreen="true" id="video" width="100%" src="http://wag.i-h5.cn/dj/wyf/video/wyf.mp4"></video>

稍微講一下video的事件

此案例並無使用timeupdate時間來實現播放進度的監聽
在此案例中
要實現第一段視頻播放完，出現選項給用戶進行視頻的選擇交互。
咱們須要在出現選項時將視屏暫停，
先來看下代碼：

function getTime(obj){
    obj.timer = setInterval(function(){
        var t = obj.currentTime;
        if(isAndroid) {
            // 選項出現
            if(Math.abs(t - 32.13) <= .1 && istest) {
                selectBtn.style.display = 'block';
                obj.pause();
                clearInterval(obj.timer);
            }
            // // 墨鏡播放完必,鐲子播放完畢,帽子播放完畢
            if(Math.abs(t) > 46.04 && typenum == 1 || Math.abs(t) > 65.16 && typenum == 2 || Math.abs(t) > 80.64 && typenum == 4) {
                selectBtn.style.display = 'block';
                obj.pause();
                istest = true;
                clearInterval(obj.timer);
            }
        } else {
            // 選項出現
            if(Math.abs(t - 32.13) <= .1 && istest) {
                selectBtn.style.display = 'block';
                // obj.currentTime = 32.13;
                obj.pause();
                clearInterval(obj.timer);
            }
            // // 墨鏡播放完必,鐲子播放完畢,帽子播放完畢
            if(Math.abs(t) > 46.04 && typenum == 1 || Math.abs(t) > 65.16 && typenum == 2 || Math.abs(t) > 80.24 && typenum == 4) {
                selectBtn.style.display = 'block';
                obj.currentTime = 32.13;
                obj.pause();
                istest = true;
                clearInterval(obj.timer);
            }
        }
        // 項鍊播放，提早呼出點擊按鈕
        if(t > 172) {
            // aLink.style.display = 'block';
            // window.location.href = 'http://wag.i-h5.cn/dj/wyf/fenx.html';
        }
    },20);
}
/**
 * 視頻開始play
 */
video.addEventListener('play', function(){
    // ovstatus = 1;
    console.log("play")
    getTime(this);
}, false);

該案例使用了定時器，在視頻開始事件觸發時開始每20ms觸發一次，判斷當前視頻進度，若到達需中止的進度時（第一段片斷播放完畢，或選項片斷結束時），暫停視頻，並出現浮層div塊，爲用戶提供交互。

點擊選項後跳到對應的進度，繼續播放視頻。以上爲該案例主要須要解決的問題。

安卓瀏覽器左上角會出現推出播放的返回按鈕，當點擊按鈕時將退出播放
退出播放時，咱們須要作相應的處理。TBS 有提供相應的事件，不過不一樣的版本有一點差別

TBS < 036849    036849 <= TBS < 036900      036900 <= TBS
是否支持同層播放器        否                  是                     是
退出全屏播放時觸發                  x5videoenterfullscreen    x5videoexitfullscreen
進入全屏播放時觸發                  x5videoexitfullscreen     x5videoenterfullscreen
經過監聽這兩個事件就能夠知道當前的播放狀態

document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){
    alert("exit fullscreen")
})

document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){
    alert("enter fullscreen")
})

在對話框中發送 //gettbs 能夠查看相關信息，tbsCoreVersion 就是當前安裝的 TBS 內核版本。

補充資料：
H5視頻播放優化：
http://www.xuanfengge.com/htm...
videoAPI：
http://www.w3school.com.cn/ta...