h5視頻播放踩坑記錄

heartFollower 發(fā)布于2019-08-02 16:09 / 2542人閱讀

隨著抖音、快手這類的視頻類app的火爆，移動(dòng)端h5視頻類應(yīng)用也隨之興起，使用video播放的場(chǎng)景也越來越多，本篇文章主要例舉了移動(dòng)端視頻播放的一些場(chǎng)景和個(gè)人在開發(fā)過程中遇到的一些問題，希望在看過這篇文章后，能對(duì)開發(fā)者在移動(dòng)端使用video播放時(shí)快速開發(fā)減少踩坑

全屏播放

視頻的全屏播放是移動(dòng)端一個(gè)很常見的場(chǎng)景，因此我們需要對(duì)video設(shè)置全屏播放，全屏播放用到的方法是requestFullscreen()，再加上考慮瀏覽器的兼容性問題，需要加上兼容代碼：

let ele = document.getElementById("video")
if (ele.requestFullscreen) {
  ele.requestFullscreen()
} else if (ele.mozRequestFullScreen) {
  ele.mozRequestFullScreen()
} else if (ele.webkitRequestFullScreen) {
  ele.webkitRequestFullScreen()
}
ele.play()

獲取video元素節(jié)點(diǎn)，然后判斷不同瀏覽器的requestFullscreen屬性，調(diào)用不同的請(qǐng)求全屏的方法，這樣就能保證視頻的全屏播放

微信瀏覽器全屏播放

為什么要多帶帶提及微信瀏覽器下的視頻全屏播放能？因?yàn)樵谖⑿畔履憧梢赃x擇使用原生瀏覽器內(nèi)核渲染video還是啟用騰訊的x5內(nèi)核渲染，有什么區(qū)別呢？如果使用原生渲染，那就和在普通瀏覽器渲染一樣，但是如果啟用騰訊x5內(nèi)核渲染，當(dāng)視頻播放時(shí)，x5內(nèi)核會(huì)強(qiáng)制視頻全屏播放，但是目前并不支持ios，接下來就一起來看微信中x5內(nèi)核全屏播放表現(xiàn)

x5內(nèi)核同層播放

通過給video標(biāo)簽添加x5-video-player-type="h5"屬性啟用x5內(nèi)核，啟用x5內(nèi)核渲染video雖然會(huì)全屏播放視頻，但是這樣也提供了更好的用戶體驗(yàn)，同時(shí)x5內(nèi)核渲染還有一個(gè)優(yōu)點(diǎn)就是支持同層渲染，video播放時(shí)層級(jí)不再是最高級(jí)，可以有元素浮在video上方，大概效果如下圖：
WechatIMG310.jpeg

如上圖所示，這是全屏播放的視頻，同時(shí)在這個(gè)視頻上面層疊了一個(gè)透明的浮層，但是會(huì)明顯發(fā)現(xiàn)視頻播放時(shí)有黑邊，那是因?yàn)闆]有聲明x5-video-player-fullscreen，如果不申明此屬性，頁面得到視口區(qū)域?yàn)樵家暱诖笮?視頻未播放前)，比如在微信里，會(huì)有一個(gè)常駐的標(biāo)題欄，如果不聲明此屬性，這個(gè)標(biāo)題欄高度不會(huì)給頁面，播放時(shí)會(huì)平均分為兩塊（上下黑塊），設(shè)置了屬性效果圖如下：
WechatIMG312.jpeg

會(huì)明顯看到視頻上頂?shù)綐?biāo)題欄，黑邊消失，如果此時(shí)視頻的寬高使用的并不是動(dòng)態(tài)計(jì)算的單位，你還需要重新賦值視頻寬高：

window.onresize = function(){
  test_video.style.width = window.innerWidth + "px";
  test_video.style.height = window.innerHeight + "px";
}

playsinline

當(dāng)在微信瀏覽器下想用x5內(nèi)核渲染，但是又不想強(qiáng)制全屏播放怎么辦呢？這個(gè)時(shí)候就要playsinline屬性了，這個(gè)屬性也能解決一些其他的移動(dòng)端瀏覽器強(qiáng)制全屏播放的問題，只需要設(shè)置playsinline="true"，webkit-playsinline="true"聲明，就可以了，但是在x5下渲染，也就是說在android下如果要用x5渲染一定會(huì)全屏播放

事件差異 loadedmetadata

此事件表示媒體的元數(shù)據(jù)已經(jīng)加載完畢，現(xiàn)在所有的屬性包含了它們應(yīng)有的有效信息，常用的信息有duration，獲取視頻的時(shí)長，但是這個(gè)屬性在android和ios下有點(diǎn)差別，在android中，在加載完視頻后就會(huì)觸發(fā)，獲取到相應(yīng)視頻信息，但是在ios下，微信瀏覽器中此事件視頻加載完成后并不會(huì)觸發(fā)，點(diǎn)擊播放后才會(huì)觸發(fā)，但是在safari瀏覽器中視頻加載完成后就會(huì)觸發(fā)

canplay

此事件表示在媒體數(shù)據(jù)已經(jīng)有足夠的數(shù)據(jù)（至少播放數(shù)幀）可供播放時(shí)觸發(fā)，此事件在android下視頻加載的時(shí)候就會(huì)觸發(fā)，但是在ios中要視頻播放后才會(huì)觸發(fā)

自動(dòng)播放

在android中autoplay屬性只有chrome瀏覽器中同時(shí)設(shè)置autoplay和muted（禁音）才能自動(dòng)播放，其他瀏覽器均不支持讓視頻自動(dòng)播放，并且在android微信瀏覽器中同時(shí)設(shè)置autoplay和poster屬性，poster屬性也會(huì)失效，視頻封面展示不出來，在ios移動(dòng)端中autoplay并不能直接自動(dòng)播放，但是mac safari中在video中設(shè)置autoplay和muted屬性可以自動(dòng)播放，這和在網(wǎng)上看到的文章有點(diǎn)出入，在MDN上有一個(gè)video屬性支持表：

總結(jié)

隨著移動(dòng)流量時(shí)代的到來，移動(dòng)端的上網(wǎng)體驗(yàn)的優(yōu)化，更多的視頻播放場(chǎng)景和需求都會(huì)承載到移動(dòng)端上，但是移動(dòng)端的視頻播放由于瀏覽器內(nèi)核、系統(tǒng)等限制性導(dǎo)致視頻在播放時(shí)表現(xiàn)不一，需要開發(fā)人員花時(shí)間精力去處理此類問題，希望這篇文章能對(duì)大家在移動(dòng)端使用video標(biāo)簽時(shí)有幫助。如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊。

GPU云服務(wù)器云服務(wù)器 h5視頻播放花屏 h5視頻播放器 h5頁面視頻自動(dòng)播放 h5同層視頻播放模式下

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

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

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

登陸后可評(píng)論

0條評(píng)論

heartFollower

男|高級(jí)講師

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

TA的文章

tensorflow

閱讀 1020·2023-04-25 23:50
App穩(wěn)定性測(cè)試-Fastbot使用筆記

閱讀 2171·2021-11-19 09:40
深入理解行內(nèi)元素的布局

閱讀 667·2019-08-30 13:50
微信小程序性能優(yōu)化入門指南

閱讀 2783·2019-08-29 17:11
定時(shí)器以及定時(shí)器的幾個(gè)案例

閱讀 1098·2019-08-29 16:37
CSS border屬性--妙用

閱讀 3079·2019-08-29 12:54
CSS 盒模型

閱讀 2858·2019-08-28 18:17
UCloud云主機(jī)硬件隔離組

閱讀 2723·2019-08-26 16:55

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

h5視頻播放踩坑記錄

相關(guān)文章