這篇文章主要介紹了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);

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

總結

以上是生活随笔為你收集整理的video 满屏显示_HTML5 video播放器全屏(fullScreen)实现的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。