HTML5 video●▂●进到全屏幕和撤出全屏幕的完成方

2021-03-23 11:38 jianzhan

当我们们应用video标识的情况下,有时候候由于大量的必须,大家要自身自定操纵栏,而进到和撤出全屏幕也是在其中的一一部分

不一样的访问器有不一样的完成方式

// Webkit
element.webkitRequestFullScreen();//进到全屏幕
document.webkitCancelFullScreen();//撤出全屏幕

// Firefox
element.mozRequestFullScreen();
document.mozCancelFullScreen();
 
// W3C 
element.requestFullscreen();
document.exitFullscreen();

一般适配性书写,大家先应用w3c规范的方式,假如不能以在适配不一样访问器。

//进到全屏幕
function FullScreen() {
    var ele = document.documentElement;
    if (ele.requestFullscreen) {
        ele.requestFullscreen();
    } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
    } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen();
    }
}
//撤出全屏幕
function exitFullscreen() {
    var de = document;
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
}

接下去是测试用例

$(ele).on('click',function(){
    FullScreen();
   // exitFullscreen();
});

到此这篇有关HTML5 video进到全屏幕和撤出全屏幕的完成方式的文章内容就详细介绍到这了,大量有关HTML5 video进到全屏幕和撤出全屏幕內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!