H5視頻活動踩坑

walterrwu 發布于2019-08-30 14:01 / 3166人閱讀

摘要：最近做了一些嵌入視頻的活動，積累了點視頻方面的經驗，下面記錄下別人和自己踩過的坑以及相應的解決方案。視頻的播放和暫停主要是調用和方法。最后需要注意的是在端播放視頻后是不會主動退出同層播放器的。

最近做了一些嵌入視頻的活動，積累了點視頻方面的經驗，下面記錄下別人和自己踩過的坑以及相應的解決方案。
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"http://視頻豎屏模式播放

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配置的如下，僅供參考

GPU云服務器云服務器 h5 視頻通話 h5 視頻加密 h5 實時視頻 h5視頻通話

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115715.html

H5視頻活動踩坑

摘要：最近做了一些嵌入視頻的活動，積累了點視頻方面的經驗，下面記錄下別人和自己踩過的坑以及相應的解決方案。視頻的播放和暫停主要是調用和方法。最后需要注意的是在端播放視頻后是不會主動退出同層播放器的。最近做了一些嵌入視頻的活動，積累了點視頻方面的經驗，下面記錄下別人和自己踩過的坑以及相應的解決方案。1、碰到問題和解決方案1.1、ios 網頁中播放視頻默認全屏（點擊視頻會彈出播放器進行全屏播放...

jzman 2019-08-01 18:39 評論0 收藏0
H5視頻活動踩坑

摘要：最近做了一些嵌入視頻的活動，積累了點視頻方面的經驗，下面記錄下別人和自己踩過的坑以及相應的解決方案。視頻的播放和暫停主要是調用和方法。最后需要注意的是在端播放視頻后是不會主動退出同層播放器的。最近做了一些嵌入視頻的活動，積累了點視頻方面的經驗，下面記錄下別人和自己踩過的坑以及相應的解決方案。1、碰到問題和解決方案1.1、ios 網頁中播放視頻默認全屏（點擊視頻會彈出播放器進行全屏播放...

DirtyMind 2019-08-22 14:53 評論0 收藏0
h5視頻播放踩坑記錄

隨著抖音、快手這類的視頻類app的火爆，移動端h5視頻類應用也隨之興起，使用video播放的場景也越來越多，本篇文章主要例舉了移動端視頻播放的一些場景和個人在開發過程中遇到的一些問題，希望在看過這篇文章后，能對開發者在移動端使用video播放時快速開發減少踩坑全屏播放視頻的全屏播放是移動端一個很常見的場景，因此我們需要對video設置全屏播放，全屏播放用到的方法是requestFullscre...

wenshi11019 2019-08-23 16:18 評論0 收藏0
h5視頻播放踩坑記錄

隨著抖音、快手這類的視頻類app的火爆，移動端h5視頻類應用也隨之興起，使用video播放的場景也越來越多，本篇文章主要例舉了移動端視頻播放的一些場景和個人在開發過程中遇到的一些問題，希望在看過這篇文章后，能對開發者在移動端使用video播放時快速開發減少踩坑全屏播放視頻的全屏播放是移動端一個很常見的場景，因此我們需要對video設置全屏播放，全屏播放用到的方法是requestFullscre...

heartFollower 2019-08-02 16:09 評論0 收藏0