html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)方法实例

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

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

复制代码代码如下:

全屏问题

*{

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);