HTML5 API详解（1）:fullscreen全屏模式
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(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});
各瀏覽器fullscreenerror 事件處理
document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });
跨瀏覽器全屏模式下樣式代碼
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
總結
以上是生活随笔為你收集整理的HTML5 API详解（1）:fullscreen全屏模式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Opencv学习笔记——release和
- 下一篇： chrome html5 mp4,HTM