H5視頻活動(dòng)踩坑

walterrwu 發(fā)布于2019-08-30 14:01 / 3175人閱讀

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

最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。
1、碰到問(wèn)題和解決方案
1.1、ios 網(wǎng)頁(yè)中播放視頻默認(rèn)全屏（點(diǎn)擊視頻會(huì)彈出播放器進(jìn)行全屏播放）。
解決不全屏播放可以添加下列屬性webkit-playsinline="true" 和 playsinline="true" 如果設(shè)置上面屬性還沒(méi)有效果，那么可以再配合下面這個(gè)插件試試。 iphone-inline-video
備注：ios下在微博中打開網(wǎng)頁(yè)播放視頻會(huì)彈出播放器播放，設(shè)置playsinline屬性無(wú)效，還必須使用上面那個(gè)插件，親測(cè)有效。
1.2、andriod中video播放完后顯示推薦視頻
移動(dòng)端瀏覽器中的video元素是比較特別的，早期無(wú)論是在iOS還是Android的瀏覽器中，它都位于頁(yè)面的最頂層，無(wú)法被遮蓋。后來(lái)這個(gè)問(wèn)題在iOS下得到了解決，但是Android的瀏覽器則問(wèn)題依舊。X5是騰訊基于Webkit開發(fā)的渲染引擎，它提供了一種名叫「同層播放器」的特殊video元素以解決遮蓋問(wèn)題。通過(guò)設(shè)置

x5-video-player-type="h5" 可以開啟同層播放器，來(lái)避免播放后顯示推薦視頻的問(wèn)題。
x5-video-player-fullscreen="true" //視頻全屏播放
x5-video-orientation="portrait"http://視頻豎屏模式播放

1.3、視頻的適配
目前設(shè)計(jì)師一般是按照iphone5或者iphone7的標(biāo)準(zhǔn)去設(shè)計(jì)視頻，一般可以通過(guò)寬高100%來(lái)播放視頻，如果發(fā)現(xiàn)視頻還是不行那么就需要根據(jù)實(shí)際情況設(shè)置 object-fit屬性來(lái)解決了。詳見半深入理解CSS3 object-position/object-fit屬性
備注：在webkit內(nèi)核瀏覽器下，默認(rèn)是object-fit:contain。
1.4、js控制視頻的播放
在ios中視頻和音頻一般都不會(huì)主動(dòng)播放，除非用戶主動(dòng)去點(diǎn)擊，所以需要通過(guò)js來(lái)監(jiān)聽界面的交互來(lái)控制視頻的播放。
視頻的播放和暫停主要是調(diào)用play和pause方法。而視頻播放過(guò)程中如果需要一些用戶的交互主要是通過(guò)timeupdate方法來(lái)監(jiān)聽當(dāng)前的播放時(shí)間，看一段代碼：

var isStop = false;
    videoElem.on("timeupdate", function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//該時(shí)間點(diǎn)展示交互蒙層
            $(".js_first_stop").removeClass("hide");
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解決ios暫停后再次點(diǎn)擊播放不了問(wèn)題，因?yàn)樵撎幱|發(fā)了多次，但是andriod沒(méi)有該問(wèn)題。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $(".js_second_stop").removeClass("hide");
        }
    });

在ios中監(jiān)聽timeupdate事件并暫停的視頻的時(shí)候需要引入一個(gè)全局的isStop變量，不然下次點(diǎn)擊繼續(xù)播放的時(shí)候沒(méi)反應(yīng)（timeupdate的時(shí)候觸發(fā)了多次暫停），但是andriod是沒(méi)有這個(gè)問(wèn)題的。判斷視頻結(jié)束可以監(jiān)聽視頻的ended事件

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

或者監(jiān)聽視頻的timeupdate事件，然后判斷ended屬性，如果為true則表示結(jié)束，false表示未結(jié)束。

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

另外在andriod端開啟了同層播放器，微信端也提供了2個(gè)監(jiān)聽進(jìn)入同層播放器和退出同層播放器的事件。進(jìn)入同層播放器事件（開始播放視頻）。

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

點(diǎn)擊左上角返回鍵退出同層播放器。

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

最后需要注意的是在andriod端播放視頻后是不會(huì)主動(dòng)退出同層播放器的。后續(xù)如果有展示的界面，也會(huì)在播放器中展示，感覺(jué)很怪異。這里可以通過(guò)鏈接跳轉(zhuǎn)來(lái)解決。
1.5、canvas播放視頻
canvas可以播放視頻，但是在某些andriod機(jī)上會(huì)看到有很嚴(yán)重的鋸齒，并且有些andriod瀏覽器播放的時(shí)候只有聲音而沒(méi)有圖像。
1.6、視頻編碼
mp4格式的視頻要h.264編碼方式，不然某些ios只有聲音而沒(méi)有圖像。
最后，一個(gè)完整的video配置的如下，僅供參考

云服務(wù)器 GPU云服務(wù)器 h5 視頻通話 h5 視頻加密 h5 實(shí)時(shí)視頻 h5視頻通話

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115715.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

walterrwu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

c語(yǔ)言實(shí)現(xiàn)掃雷（簡(jiǎn)易版）

閱讀 2024·2021-11-15 11:38
第三方CSS安全嗎？

閱讀 2058·2019-08-30 15:55
[轉(zhuǎn)]CSS3 transform順序問(wèn)題

閱讀 2192·2019-08-30 15:52
H5視頻活動(dòng)踩坑

閱讀 3176·2019-08-30 14:01
Apple官網(wǎng)研究之使用Justify布局導(dǎo)航

閱讀 2693·2019-08-30 12:47
不可思議的CSS之clip-path

閱讀 1158·2019-08-29 13:17
大家都有自己的事情要做

閱讀 1072·2019-08-26 13:55
前端筆記 vue/js/git

閱讀 2640·2019-08-26 13:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

H5視頻活動(dòng)踩坑

相關(guān)文章