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

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