首頁 >web前端 >H5教程 >H5開發影片遇到的問題及解決方案

H5開發影片遇到的問題及解決方案

小云云原創: 2018-02-28 14:18:232679瀏覽

最近做了一些嵌入影片的活動，累積了點影片的經驗，下面記錄別人和自己踩過的坑以及相應的解決方案。
1、碰到問題和解決方案
1.1、ios 網頁中播放影片預設全螢幕（點擊影片會彈出播放器進行全螢幕播放）。
解決不全螢幕播放可以加入下列屬性webkit-playsinline='true' 和 playsinline='true' 如果設定上面屬性還沒有效果，那麼可以再配合下面這個外掛來試試。 iphone-inline-video
備註：ios下在微博中開啟網頁播放影片會彈出播放器播放，設定playsinline屬性無效，還必須使用上面那個插件，親測有效。
1.2、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.3、視頻的適配
目前設計師一般是按照iphone5或iphone7的標準去設計視頻，一般可以透過寬高100%來播放視頻，如果發現影片還是不行那麼就需要根據實際情況設定object-fit屬性來解決了。詳見半深入理解CSS3 object-position/object-fit屬性
備註：在webkit核心瀏覽器下，預設為object-fit:contain。
1.4、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.5、canvas播放視頻
canvas可以播放視頻，但是在某些andriod機上會看到有很嚴重的鋸齒，並且有些andriod瀏覽器播放的時候只有聲音而沒有圖像。
1.6、視訊編碼
mp4格式的影片要h.264編碼方式，不然某些ios只有聲音而沒有影像。
最後，一個完整的video配置的如下，僅供參考

<video playsinline="true"></video>

H5開發影片遇到的問題及解決方案

相關文章