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之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
css3应用示例:新增的选择器
Mar 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简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Python线程详解
2015/06/24 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
新闻编辑自荐信
2013/11/03 职场文书
行政总经理岗位职责
2013/12/05 职场文书
小学教师师德反思
2014/02/03 职场文书
公证委托书模板
2014/04/03 职场文书
小学生作文评语大全
2014/04/21 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
通讯稿格式及范文
2015/07/22 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
Python进行区间取值案例讲解
2021/08/02 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js