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开启硬件加速的使用和坑
Aug 21 HTML / CSS
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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分页类的代码
2011/05/18 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
使用js检测浏览器的实现代码
2013/05/14 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python 加密的实例详解
2017/10/09 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
python、Matlab求定积分的实现
2019/11/20 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
jupyter notebook 重装教程
2020/04/16 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
中学生关于梦想的演讲稿
2014/08/22 职场文书
教师批评与自我批评
2014/10/15 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Oracle使用别名的好处
2022/04/19 Oracle