登录

js网页全屏显示、播放器全屏,模块全屏显示,视频全屏播放,退出全屏

我来纠错
//传入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);
发送
热门关键词:
命令
知识类型:
标题描述:
详细解答:

提交审核您编辑的知识会经过 前端大牛 人工审核。