H5視頻活動踩坑

最近作了一些嵌入視頻的活動，積累了點視頻方面的經驗，下面記錄下別人和本身踩過的坑以及相應的解決方案。
一、碰到問題和解決方案
1.一、ios 網頁中播放視頻默認全屏（點擊視頻會彈出播放器進行全屏播放）。
解決不全屏播放能夠添加下列屬性webkit-playsinline='true' 和 playsinline='true' 若是設置上面屬性尚未效果，那麼能夠再配合下面這個插件試試。 iphone-inline-video
備註：ios下在微博中打開網頁播放視頻會彈出播放器播放，設置playsinline屬性無效，還必須使用上面那個插件，親測有效。
1.二、andriod中video播放完後顯示推薦視頻
移動端瀏覽器中的video元素是比較特別的，早期不管是在iOS仍是Android的瀏覽器中，它都位於頁面的最頂層，沒法被遮蓋。後來這個問題在iOS下獲得瞭解決，可是Android的瀏覽器則問題依舊。X5是騰訊基於Webkit開發的渲染引擎，它提供了一種名叫「同層播放器」的特殊video元素以解決遮蓋問題。經過設置

x5-video-player-type="h5" 能夠開啓同層播放器，來避免播放後顯示推薦視頻的問題。
x5-video-player-fullscreen="true" //視頻全屏播放
x5-video-orientation="portrait"//視頻豎屏模式播放

1.三、視頻的適配
目前設計師通常是按照iphone5或者iphone7的標準去設計視頻，通常能夠經過寬高100%來播放視頻，若是發現視頻仍是不行那麼就須要根據實際狀況設置 object-fit屬性來解決了。 詳見半深刻理解CSS3 object-position/object-fit屬性
備註：在webkit內核瀏覽器下，默認是object-fit:contain。
1.四、js控制視頻的播放
在ios中視頻和音頻通常都不會主動播放，除非用戶主動去點擊，因此須要經過js來監聽界面的交互來控制視頻的播放。
視頻的播放和暫停主要是調用play和pause方法。 而視頻播放過程當中若是須要一些用戶的交互主要是經過timeupdate方法來監聽當前的播放時間，看一段代碼：

var isStop = false;
    videoElem.on('timeupdate', function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//該時間點展現交互蒙層
            $('.js_first_stop').removeClass('hide');
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解決ios暫停後再次點擊播放不了問題，由於該處觸發了屢次，可是andriod沒有該問題。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $('.js_second_stop').removeClass('hide');
        }
    });

在ios中監聽timeupdate事件並暫停的視頻的時候須要引入一個全局的isStop變量，否則下次點擊繼續播放的時候沒反應（timeupdate的時候觸發了屢次暫停），可是andriod是沒有這個問題的。 判斷視頻結束能夠監聽視頻的ended事件

videoElem.on('ended',function(){});

或者監聽視頻的timeupdate事件，而後判斷ended屬性，若是爲true則表示結束，false表示未結束。

videoElem.on('timeupdate',function(){
   if(videoElem[0].ended){
    //播放結束
   }
}

另外在andriod端開啓了同層播放器，微信端也提供了2個監聽進入同層播放器和退出同層播放器的事件。 進入同層播放器事件（開始播放視頻）。

videoElem.on("x5videoenterfullscreen", function(){}

點擊左上角返回鍵退出同層播放器。

videoElem.on('x5videoexitfullscreen',function(){}

最後須要注意的是在andriod端播放視頻後是不會主動退出同層播放器的。後續若是有展現的界面，也會在播放器中展現，感受很怪異。這裏能夠經過連接跳轉來解決。
1.五、canvas播放視頻
canvas能夠播放視頻，可是在某些andriod機上會看到有很嚴重的鋸齒，而且有些andriod瀏覽器播放的時候只有聲音而沒有圖像。
1.六、視頻編碼
mp4格式的視頻要h.264編碼方式，否則某些ios只有聲音而沒有圖像。
最後，一個完整的video配置的以下，僅供參考

<video class="js_video" style="object-fit: cover; width: 100%; height: 100%;" preload="load" 
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
 x5-video-orientation="portrait"src="https://video.mdcdn.cn/friend2018.mp4"></video>