/**
* @Title: HTML5 fullscreen全屏API
* @author Andseny
* @date 2016年12月12日
* @version 1.0
* 使用说明:
* fullscreen API 接口
* 属性1:fullscreenElement 该属性返回当前处于全屏模式的DOM元素。
* 属性2:fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。
* 方法1:requestFullscreen() 请求进入全屏模式。
* 方法2:exitFullscreen() 退出全屏模式。
* 事件1:fullscreenchange 进入/退出全屏模式切换时会触发。
* 事件2:fullscreenerror 进入/退出全屏模式失败时会触发。
* 由于fullscreen API 存在浏览器兼容性问题,所以我们在使用的时候需要进行跨浏览器处理,参考代码:
*/
/*跨浏览器返回正处于全屏的元素*/
function fullscreenElement(){
var fullscreenEle = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
//注意:要在用户授权全屏后才能获取全屏的元素,否则 fullscreenEle为null
console.log("全屏元素:"+fullscreenEle);
return fullscreenEle;
}
/*跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态*/
function fullscreenEnable(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;
//注意:要在用户授权全屏后才能准确获取当前的状态
if(isFullscreen){
console.log('全屏模式');
}else{
console.log('非全屏模式');
}
}
/*跨浏览器发动全屏*/
function lanchFullscreen(element){
if(element.requestFullscreen){
element.requestFullscreen();
}
else if(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}
else if(element.msRequestFullscreen){
element.msRequestFullscreen();
}
else if(element.webkitRequestFullscreen){
element.webkitRequestFullScreen();
}
}
/*跨浏览器退出全屏*/
function exitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msExitFullscreen){
document.msExiFullscreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
}
/*各浏览器fullscreenchange 事件处理*/
document.addEventListener('fullscreenchange', function(){
//屏幕改变模式时,执行的代码
//退出全屏执行的代码
if(fullscreenElement()==""||fullscreenElement()==null){
//退出全屏或者全屏状态下点击ESC键时执行
}
});
document.addEventListener('webkitfullscreenchange', function(){
//屏幕改变模式时,执行的代码
});
document.addEventListener('mozfullscreenchange', function(){
//屏幕改变模式时,执行的代码
});
document.addEventListener('MSFullscreenChange', function(){
//屏幕改变模式时,执行的代码
});
/*各浏览器fullscreenerror 事件处理*/
document.addEventListener('fullscreenerror', function(){
/*全屏失败代码*/
});
document.addEventListener('webkitfullscreenerror', function(){
/*全屏失败代码*/
});
document.addEventListener('mozfullscreenerror', function(){
/*全屏失败代码*/
});
document.addEventListener('MSFullscreenError', function(){
/*全屏失败代码*/
});
/*跨浏览器全屏模式下样式代码*/
<style type="text/css">
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
</style>
HTML5 <fullscreen全屏API>
最新推荐文章于 2023-03-20 15:18:26 发布