html中控制video标签全屏

系统管理员 2022-06-05 11:42 616阅读 0赞

<!doctype  html>

<html>

<head>

\*\{

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>

</video>

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

</div>

//反射調用

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>

html中控制video标签全屏

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS_控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）

相关 iframe标签全屏

相关 HTML5新标签video在iOS上默认全屏播放

相关控制webview使用html5的video播放视频不全屏(inline)的方法

相关关于HTML5中Video全屏监听,退出全屏事件方法(亲测有效)

相关 HTML 5 video 视频标签全属性详解

相关 html中控制video标签全屏

相关 JS自定义多媒体Video控制条（控制视频播放、进度、全屏案例）

相关 HTML5 video 进入全屏和退出全屏

相关如何使用HTML5中video标签