h5 video全屏播放

相關連接：

• 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);
複製代碼