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);
复制代码