資訊專欄INFORMATION COLUMN
隨著抖音、快手這類的視頻類app的火爆，移動端h5視頻類應用也隨之興起，使用video播放的場景也越來越多，本篇文章主要例舉了移動端視頻播放的一些場景和個人在開發過程中遇到的一些問題，希望在看過這篇文章后，能對開發者在移動端使用video播放時快速開發減少踩坑
全屏播放視頻的全屏播放是移動端一個很常見的場景，因此我們需要對video設置全屏播放，全屏播放用到的方法是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元素節點，然后判斷不同瀏覽器的requestFullscreen屬性，調用不同的請求全屏的方法，這樣就能保證視頻的全屏播放
微信瀏覽器全屏播放為什么要多帶帶提及微信瀏覽器下的視頻全屏播放能？因為在微信下你可以選擇使用原生瀏覽器內核渲染video還是啟用騰訊的x5內核渲染，有什么區別呢？如果使用原生渲染，那就和在普通瀏覽器渲染一樣，但是如果啟用騰訊x5內核渲染，當視頻播放時，x5內核會強制視頻全屏播放，但是目前并不支持ios，接下來就一起來看微信中x5內核全屏播放表現
x5內核同層播放通過給video標簽添加x5-video-player-type="h5"屬性啟用x5內核，啟用x5內核渲染video雖然會全屏播放視頻，但是這樣也提供了更好的用戶體驗，同時x5內核渲染還有一個優點就是支持同層渲染，video播放時層級不再是最高級，可以有元素浮在video上方，大概效果如下圖：
WechatIMG310.jpeg
如上圖所示，這是全屏播放的視頻，同時在這個視頻上面層疊了一個透明的浮層，但是會明顯發現視頻播放時有黑邊，那是因為沒有聲明x5-video-player-fullscreen，如果不申明此屬性，頁面得到視口區域為原始視口大小(視頻未播放前)，比如在微信里，會有一個常駐的標題欄，如果不聲明此屬性，這個標題欄高度不會給頁面，播放時會平均分為兩塊（上下黑塊），設置了屬性效果圖如下：
WechatIMG312.jpeg
會明顯看到視頻上頂到標題欄，黑邊消失，如果此時視頻的寬高使用的并不是動態計算的單位，你還需要重新賦值視頻寬高：
window.onresize = function(){
test_video.style.width = window.innerWidth + "px";
test_video.style.height = window.innerHeight + "px";
}
playsinline
當在微信瀏覽器下想用x5內核渲染，但是又不想強制全屏播放怎么辦呢？這個時候就要playsinline屬性了，這個屬性也能解決一些其他的移動端瀏覽器強制全屏播放的問題，只需要設置playsinline="true"，webkit-playsinline="true"聲明，就可以了，但是在x5下渲染，也就是說在android下如果要用x5渲染一定會全屏播放
事件差異 loadedmetadata此事件表示媒體的元數據已經加載完畢，現在所有的屬性包含了它們應有的有效信息，常用的信息有duration，獲取視頻的時長，但是這個屬性在android和ios下有點差別，在android中，在加載完視頻后就會觸發，獲取到相應視頻信息，但是在ios下，微信瀏覽器中此事件視頻加載完成后并不會觸發，點擊播放后才會觸發，但是在safari瀏覽器中視頻加載完成后就會觸發
canplay此事件表示在媒體數據已經有足夠的數據（至少播放數幀）可供播放時觸發，此事件在android下視頻加載的時候就會觸發，但是在ios中要視頻播放后才會觸發
自動播放在android中autoplay屬性只有chrome瀏覽器中同時設置autoplay和muted（禁音）才能自動播放，其他瀏覽器均不支持讓視頻自動播放，并且在android微信瀏覽器中同時設置autoplay和poster屬性，poster屬性也會失效，視頻封面展示不出來，在ios移動端中autoplay并不能直接自動播放，但是mac safari中在video中設置autoplay和muted屬性可以自動播放，這和在網上看到的文章有點出入，在MDN上有一個video屬性支持表：
隨著移動流量時代的到來，移動端的上網體驗的優化，更多的視頻播放場景和需求都會承載到移動端上，但是移動端的視頻播放由于瀏覽器內核、系統等限制性導致視頻在播放時表現不一，需要開發人員花時間精力去處理此類問題，希望這篇文章能對大家在移動端使用video標簽時有幫助。如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102872.html
隨著抖音、快手這類的視頻類app的火爆，移動端h5視頻類應用也隨之興起，使用video播放的場景也越來越多，本篇文章主要例舉了移動端視頻播放的一些場景和個人在開發過程中遇到的一些問題，希望在看過這篇文章后，能對開發者在移動端使用video播放時快速開發減少踩坑 全屏播放 視頻的全屏播放是移動端一個很常見的場景，因此我們需要對video設置全屏播放，全屏播放用到的方法是requestFullscre...
閱讀 3250·2023-04-25 22:47
閱讀 3765·2021-10-11 10:59
閱讀 2300·2021-09-07 10:12
閱讀 4243·2021-08-11 11:15
閱讀 3432·2019-08-30 13:15
閱讀 1750·2019-08-30 13:00
閱讀 968·2019-08-29 14:02
閱讀 1680·2019-08-26 13:57
