全屏显示HTML,HTML5 全屏显示兼容方案

首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多

在html5中，全屏方法可以适用于很多html标签元素，不仅仅是video

 html>

全屏问题

*{

padding: 0px;

margin: 0px;

}

body div.videobox{

width: 400px;

height: 320px;

margin: 100px auto;

background-color:#000;

}

body div.videobox video.video

{

width: 100%;

height: 100%;

}

:-webkit-full-screen {

}

:-moz-full-screen {

}

:-ms-fullscreen {

}

:-o-fullscreen {

}

:full-screen {

}

:fullscreen {

}

:-webkit-full-screen video {

width: 100%;

height: 100%;

}

:-moz-full-screen video{

width: 100%;

height: 100%;

}

全屏

//反射調用

var invokeFieldOrMethod = function(element, method)

{

var usablePrefixMethod;

["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {

if (usablePrefixMethod) return;

if (prefix === "") {

// 无前缀，方法首字母小写

method = method.slice(0,1).toLowerCase() + method.slice(1);

}

var typePrefixMethod = typeof element[prefix + method];

if (typePrefixMethod + "" !== "undefined") {

if (typePrefixMethod === "function") {

usablePrefixMethod = element[prefix + method]();

} else {

usablePrefixMethod = element[prefix + method];

}

}

});

return usablePrefixMethod;

};

//進入全屏

function launchFullscreen(element)

{

//此方法不可以在異步任務中執行，否則火狐無法全屏

if(element.requestFullscreen) {

element.requestFullscreen();

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if(element.msRequestFullscreen){

element.msRequestFullscreen();

} else if(element.oRequestFullscreen){

element.oRequestFullscreen();

}

else if(element.webkitRequestFullscreen)

{

element.webkitRequestFullScreen();

}else{

var docHtml  = document.documentElement;

var docBody  = document.body;

var videobox  = document.getElementById('videobox');

var  cssText = 'width:100%;height:100%;overflow:hidden;';

docHtml.style.cssText = cssText;

docBody.style.cssText = cssText;

videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';

document.IsFullScreen = true;

}

}

//退出全屏

function exitFullscreen()

{

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if(document.oRequestFullscreen){

document.oCancelFullScreen();

}else if (document.webkitExitFullscreen){

document.webkitExitFullscreen();

}else{

var docHtml  = document.documentElement;

var docBody  = document.body;

var videobox  = document.getElementById('videobox');

docHtml.style.cssText = "";

docBody.style.cssText = "";

videobox.style.cssText = "";

document.IsFullScreen = false;

}

}

document.getElementById('fullScreenBtn').addEventListener('click',function(){

launchFullscreen(document.getElementById('video'));

window.setTimeout(function exit(){

//檢查瀏覽器是否處於全屏

if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)

{

exitFullscreen();

}

},5*1000);

},false);

~~~~~~~~~~~~~~~~~~~~2014-11-30 更新，已修复的buglist如下~~~~~~~~~~~~~~~~~~~~~~~~~~~~

bug，之前写的Demo 不能做到很好的兼容 firefox全屏失败

FullScreenDeniedNotInputDriven=全屏请求被拒绝，因为 Element.mozRequestFullScreen() 不是在一个短期运行的由用户引发的事件处理代码段中运行的。

2.bug IE浏览器无法全屏，这里只让它放大了

3.IE浏览器无法判断是否全屏

4.之前忽略了 欧朋浏览器