当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5 video进入全屏和退出全屏的实现方法

HTML5 video进入全屏和退出全屏的实现方法

2020年08月18日  | 移动技术网IT编程  | 我要评论
HTML5 video进入全屏和退出全屏的实现方法这篇文章主要介绍了HTML5 video进入全屏和退出全屏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习... 20-07-28

当我们使用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进入全屏和退出全屏内容请搜索移动技术网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网