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

转载于:https://juejin.im/post/5cdae530f265da03973ad0b5