HTML5 video播放器全屏(fullScreen)方法实例
来源:易贤网 阅读:7787 次 日期:2016-07-09 11:41:26
温馨提示:易贤网小编为您整理了“HTML5 video播放器全屏(fullScreen)方法实例”,方便广大网友查阅!

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

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

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

代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<title>全屏问题</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<meta http-equiv="imagetoolbar" content="no"/>

<meta name="apple-mobile-web-app-capable" content="yes"/>

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<style type="text/css">

*{

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

}

</style>

</head>

<body>

<div id="videobox">

<video controls="controls" preload="preload" id="video" poster="poster.jpg">

<source src="./movie.ogg" type="video/ogg" />

<source src="./movie.mp4" type="video/mp4" />

<source src="./movie.webm" type="video/webm" />

<object data="./movie.mp4" width="100%" height="100%">

<embed width="100%" height="100%" src="./movie.swf" />

</object>

</video>

<button id="fullScreenBtn">全屏</button>

</div>

<script type="text/javascript">

//反射調用

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

</script>

</body>

</html>

更多信息请查看网页制作
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标