html中控制video标签全屏
来源:互联网 发布:三国志9怎么开优化 编辑:程序博客网 时间:2024/05/21 21:36
<!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>
阅读全文
0 0
- html中控制video标签全屏
- html5 video标签全屏
- html之video标签
- HTML video UI及全屏功能记录
- HTML 5 <video> <audio> 标签
- html5中video标签
- H5中video标签
- H5中video标签
- HTML5中<video>标签
- CSS控制HTML全屏背景
- 让video在div中铺满全屏
- [HTML5] Video 标签播放及控制视频
- html5 video标签自定义控制条
- h5 video标签 自定义控制条
- html5 video标签在IOS里面默认全屏播放问题
- HTML5新标签video在iOS上默认全屏播放
- Chromium为视频标签<video>全屏播放的过程分析
- 微信video标签全屏无法退出bug
- 大数据学习一: 需要理解的基础概念
- LeetCode基础--二叉树--层次遍历
- 开始SDUT OJ提高实验—动态规划,小总结Round#2
- 优达学城/机器人人工智能/第一章汽车定位作业解析
- 面向对象
- html中控制video标签全屏
- 中间交付个人总结
- 编程思想 | 自顶向下,逐步求精
- 使用flex实现页面布局
- linux vim编辑器之环境设置
- Python入门(基础)踩过的坑
- C++的inline函数
- poj2970The lazy programmer 优先队列+贪心
- Libevent源码分析 (1) hello-world