js网页全屏显示、播放器全屏,模块全屏显示,视频全屏播放,退出全屏
分享知识http://www.fedrobots.com/?search=58482我来纠错//传入id即可全屏显示改元素,也可传入div元素的id,这样就可以全屏显示某个模块。
function fullscreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
}else if(element.mozRequestFullScreen) { //兼容moz
element.mozRequestFullScreen();
}else if(element.webkitRequestFullScreen) { //兼容webkit
element.webkitRequestFullScreen();
}else{
console.log('您的浏览器不支持全屏');
}
}
//网页全屏
var bodyid = document.getElementById('bodyid');
bodyid.addEventListener("click", function(){
fullscreen(bodyid);
}, false);
//进入全屏播放视频
var video = document.getElementById('video');
video.addEventListener("click", function(){
this.play();
fullscreen(video);
}, false);
//退出全屏动作
video.addEventListener("webkitfullscreenchange",function(e){
this.pause();
}, false);
//播放完毕自动退出全屏
video.addEventListener('ended',function(){
document.webkitCancelFullScreen();
},false);