相關鏈接：

• H5 video?的使用
• H5 video開發問題及相關知識點

由于全屏播放在移動web上的兼容問題，尤其是在iOS上，讓全屏本應該比較簡單的操作，根據業務的需求，有時候會有些復雜。這里查看原生全屏相關API

使用全屏的方式有兩個，一個是模擬全屏，一個是web原生的；模擬全屏的好處是可以自定義相關控件，以達到統一多端樣式的目的，并可以在全屏模式下做很多自定義的操作；缺點是，在移動端需要終端支持，且需要處理兼容問題，安卓問題多些。
原生全屏相對比較方便，處理起來會比較輕松，缺點是全屏后，幾乎不能做什么干預，且iOS存兼容問題，主要表現為onwebkitfullscreenchange在iOS上無法監聽到，感知不到全屏狀態變化，另外對當前全屏元素的標識的API支持也有問題。
iOS、安卓 全屏的相關屬性、方法的支持情況可以參考下表

可以看出，iOS對document 對象關于全屏的屬性幾乎都不支持（在圖示版本中），使用原生全屏功能的進入全屏后，iOS上能判斷是否處于全屏狀態的只有通過定時器監聽webkitDisplayingFullscreen/ webkitPresentationMode兩個值的狀態。

而安卓上，webkitDisplayingFullscreen存在問題，可以監聽document.onwebkitfullscreenchange，并通過event對象的srcElement是否為當前video DOM對象來結合webkitIsFullScreen來判斷當前video是否處于全屏狀態。

出于以上情況，進入全屏（移動端web）和全屏狀態檢測兼容代碼整理如下：

// 進入全屏 if (video.requestFullscreen) {// 最新標準video.requestFullscreen(); } else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen(); } else {// iOS進入全屏video.webkitEnterFullscreen();// 針對iOS監聽不到webkitfullscreenchange事件做的兼容，感知退出全屏let timer = setInterval(() => {if (!video.webkitDisplayingFullscreen) {// 退出了全屏clearInterval(timer);}}, 1000); }// 狀態判斷，PC Chrome document.addEventListener('webkitfullscreenchange', (evt) => {if (!video.webkitDisplayingFullscreen) {// 退出全屏} }, false);// 全屏狀態改變事件，Android document.addEventListener('webkitfullscreenchange', (evt) => {if (!document.webkitIsFullScreen && evt.srcElement === video) {// 退出全屏} }, false);復制代碼

全屏相關屬性的兼容性驗證（看打印日志）：

const video = document.querySelector('#video');console.log('document.onfullscreenchange: ', 'onfullscreenchange' in document)console.log('document.onwebkitfullscreenchange: ', 'onwebkitfullscreenchange' in document); console.log('document.webkitExitFullscreen: ', 'webkitExitFullscreen' in document)console.log('\n');console.log('document.webkitCurrentFullScreenElement: ', document.webkitCurrentFullScreenElement);console.log('document.webkitFullscreenElement: ', document.webkitFullscreenElement);console.log('document.webkitIsFullScreen: ', document.webkitIsFullScreen);console.log('document.webkitFullscreenEnabled: ', document.webkitFullscreenEnabled);console.log('\n');console.log('video.onwebkitfullscreenchange: ', 'onwebkitfullscreenchange' in video)console.log('video.webkitExitFullscreen: ', 'webkitExitFullscreen' in video)console.log('video.displayingFullscreen: ', video.webkitDisplayingFullscreen);console.log('video.webkitSupportsFullscreen: ', video.webkitSupportsFullscreen); 復制代碼

轉載于:https://juejin.im/post/5cdae530f265da03973ad0b5

總結

以上是生活随笔為你收集整理的h5 video全屏播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。