由于全屏播放在移动web上的兼容问题，尤其是在iOS上，让全屏本应该比较简单的操作，根据业务的需求，有时候会有些复杂。这里查看原生全屏相关API

而安卓上，webkitDisplayingFullscreen存在问题，可以监听document.onwebkitfullscreenchange，并通过event对象的srcElement是否为当前video DOM对象来结合webkitIsFullScreen来判断当前video是否处于全屏状态。

// 进入全屏
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);
复制代码