最近在捉摸html的video标签，本来一切顺利的，最后遇到视频不能全屏的问题，网上查了很多资料感觉都还蛮复杂的，貌似这个需求不是很大，所以比较少有人来做个功能的框架，最后我用了一个javascript中的fullscreen的API实现的。

使用fullscreen最重要的是对浏览器的判断，因为他在每个浏览器的实现过程不一样，你要调用的方法就不一样了，做好浏览器的判断就很简单了。

首先我们确定一个要全屏的div：

........

我们通过id得到这个div的dom对象，var full=document.getElementById_x("fullscreen");

接下来我们通过判断是哪种浏览器版本来调用方法来进入全屏，这里我们其实可以不用判断是哪种浏览器的，我们只需要判断哪个进入全屏的方法可以使用就可以了：

function launchIntoFullscreen(element) {

if(element.requestFullscreen){

element.requestFullscreen();

}

else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

}

else if(element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

}

else if(element.msRequestFullscreen) {

element.msRequestFullscreen();

}

}

调用launchIntoFullscreen(full)就可以让这个div进入全屏了，进入全屏后还要退出全屏，退出全屏也要判断浏览器类型如下：

function exitFullscreen() {

if(document.exitFullscreen) {

document.exitFullscreen();

} else if(document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if(document.webkitExitFullscreen) {

document.webkitExitFullscreen();

}

}

这样就退出全屏模式了，通过进入和退出的按钮就可以实现进入和退出全屏，如果要通过双击来实现还要多个步骤，判断是否处于全屏，对于判断是否处于全屏各浏览器支持不一样，所以方法也不一样，

具体支持如下

方法如下：

function isFullscreen(){

if(navigator.userAgent.indexOf("Firefox")!=-1) {

return document.mozFullScreen;

} else if(navigator.userAgent.indexOf("Chrome")!=-1) {

return document.webkitIsFullScreen;

}

return document.fullscreen;

}

这样就实现了全屏的功能，不过貌似这个功能只在播放器上用的比较多呢。

感谢您的阅读!本文章由java培训班转载自网络感谢大家的关注 版权归原作者所有如有侵权请联系我们进行删除