相關(guān)鏈接：

• H5 video?的使用
• H5 video開發(fā)問題及相關(guān)知識(shí)點(diǎn)

由于全屏播放在移動(dòng)web上的兼容問題，尤其是在iOS上，讓全屏本應(yīng)該比較簡(jiǎn)單的操作，根據(jù)業(yè)務(wù)的需求，有時(shí)候會(huì)有些復(fù)雜。這里查看原生全屏相關(guān)API

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

可以看出，iOS對(duì)document 對(duì)象關(guān)于全屏的屬性幾乎都不支持（在圖示版本中），使用原生全屏功能的進(jìn)入全屏后，iOS上能判斷是否處于全屏狀態(tài)的只有通過定時(shí)器監(jiān)聽webkitDisplayingFullscreen/ webkitPresentationMode兩個(gè)值的狀態(tài)。

而安卓上，webkitDisplayingFullscreen存在問題，可以監(jiān)聽document.onwebkitfullscreenchange，并通過event對(duì)象的srcElement是否為當(dāng)前video DOM對(duì)象來結(jié)合webkitIsFullScreen來判斷當(dāng)前video是否處于全屏狀態(tài)。

出于以上情況，進(jìn)入全屏（移動(dòng)端web）和全屏狀態(tài)檢測(cè)兼容代碼整理如下：

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

全屏相關(guān)屬性的兼容性驗(yàn)證（看打印日志）：

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); 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5cdae530f265da03973ad0b5

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。