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

資訊專欄INFORMATION COLUMN

h5視頻播放踩坑記錄

wenshi11019 / 695人閱讀

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

全屏播放

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

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，接下來(lái)就一起來(lái)看微信中x5內(nèi)核全屏播放表現(xiàn)

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

通過(guò)給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)闆](méi)有聲明x5-video-player-fullscreen，如果不申明此屬性，頁(yè)面得到視口區(qū)域?yàn)樵家暱诖笮?視頻未播放前)，比如在微信里，會(huì)有一個(gè)常駐的標(biāo)題欄，如果不聲明此屬性，這個(gè)標(biāo)題欄高度不會(huì)給頁(yè)面，播放時(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)制全屏播放的問(wèn)題，只需要設(shè)置playsinline="true"，webkit-playsinline="true"聲明，就可以了，但是在x5下渲染，也就是說(shuō)在android下如果要用x5渲染一定會(huì)全屏播放

事件差異 loadedmetadata

此事件表示媒體的元數(shù)據(jù)已經(jīng)加載完畢，現(xiàn)在所有的屬性包含了它們應(yīng)有的有效信息，常用的信息有duration，獲取視頻的時(shí)長(zhǎng)，但是這個(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ì)失效，視頻封面展示不出來(lái)，在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í)代的到來(lái)，移動(dòng)端的上網(wǎng)體驗(yàn)的優(yōu)化，更多的視頻播放場(chǎng)景和需求都會(huì)承載到移動(dòng)端上，但是移動(dòng)端的視頻播放由于瀏覽器內(nèi)核、系統(tǒng)等限制性導(dǎo)致視頻在播放時(shí)表現(xiàn)不一，需要開(kāi)發(fā)人員花時(shí)間精力去處理此類問(wèn)題，希望這篇文章能對(duì)大家在移動(dòng)端使用video標(biāo)簽時(shí)有幫助。如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊。

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

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

相關(guān)文章

  • h5視頻播放踩坑記錄

    隨著抖音、快手這類的視頻類app的火爆，移動(dòng)端h5視頻類應(yīng)用也隨之興起，使用video播放的場(chǎng)景也越來(lái)越多，本篇文章主要例舉了移動(dòng)端視頻播放的一些場(chǎng)景和個(gè)人在開(kāi)發(fā)過(guò)程中遇到的一些問(wèn)題，希望在看過(guò)這篇文章后，能對(duì)開(kāi)發(fā)者在移動(dòng)端使用video播放時(shí)快速開(kāi)發(fā)減少踩坑 全屏播放 視頻的全屏播放是移動(dòng)端一個(gè)很常見(jiàn)的場(chǎng)景，因此我們需要對(duì)video設(shè)置全屏播放，全屏播放用到的方法是requestFullscre...

    heartFollower 評(píng)論0 收藏0

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

    摘要：最近做了一些嵌入視頻的活動(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)行全屏播放...

    walterrwu 評(píng)論0 收藏0

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

    摘要：最近做了一些嵌入視頻的活動(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)行全屏播放...

    jzman 評(píng)論0 收藏0

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

    摘要：最近做了一些嵌入視頻的活動(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)行全屏播放...

    DirtyMind 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<