这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下

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

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

全屏问题

*{

padding: 0px;

margin: 0px;

}

body p.videobox{

width: 400px;

height: 320px;

margin: 100px auto;

background-color:#000;

}

body p.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);

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注jquery中文网！

相关推荐：

HTML5

video标签的播放控制

关于H5新属性audio音频和video视频的控制解析