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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 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
简单的php文件上传(实例)
2013/10/27 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
Vue中封装input组件的实例详解
2017/10/17 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
对Python 语音识别框架详解
2018/12/24 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python之拟合的实现
2019/07/19 Python
python3实现高效的端口扫描
2019/08/31 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
假日旅行社实习自我鉴定
2013/09/24 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
党员思想汇报范文
2013/12/30 职场文书
职工运动会邀请函
2014/01/19 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
承兑汇票延期证明
2015/06/23 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书