HTML5 video播放器全屏(fullScreen)方法实例


Posted in HTML / CSS onApril 24, 2015

首先来说,这个标题具有误导性,但这样设置改标题也是主要因为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)
{
//此方法不可以在?步任?罩?绦校??t火狐?o法全屏
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(){
//?z查?g?器是否?於全屏
if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)
{
exitFullscreen();
}
},5*1000);
},false);

</script>
</body>

</html>

HTML5 video播放器全屏(fullScreen)方法实例

HTML / CSS 相关文章推荐
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 #HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 #HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 #HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 #HTML / CSS
微信浏览器取消缓存的方法
Mar 28 #HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 #HTML / CSS
You might like
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
php无序树实现方法
2015/07/28 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
js实现右键菜单功能
2016/11/28 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python如何转换字符串大小写
2020/06/04 Python
python3代码中实现加法重载的实例
2020/12/03 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
开会迟到检讨书
2014/02/03 职场文书
宿舍标语大全
2014/06/19 职场文书
2014年业务工作总结
2014/11/17 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang