阅读 627

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



关注下面的标签,发现更多相似文章
评论