首页 > 代码库 > html5 video全屏实现方式
html5 video全屏实现方式
首先来说，这个标题具有误导性，但这样设置改标题也是主要因为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;
}
</style>
</head>
<body>
<div class="videobox">
<video width="400px" height="300px" controls="controls" preload="preload" id="video" poster="poster.jpg">
<source src="http://www.mamicode.com/movie.ogg" type="video/ogg" />
<source src="http://www.mamicode.com/movie.mp4" type="video/mp4" />
<source src="http://www.mamicode.com/movie.webm" type="video/webm" />
<object data="http://www.mamicode.com/movie.mp4" width="400px" height="300px">
<embed width="400px" height="300px" src="http://www.mamicode.com/movie.swf" />
</object>
</video>
<button id="fullScreenBtn">全屏</button>
</div>
<script type="text/javascript">
//alert(document.createDocumentFragment);
function launchFullscreen(element)
{
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
function exitFullscreen()
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
document.querySelector(‘#fullScreenBtn‘).onclick = function()
{
window.setTimeout(function enter(){
launchFullscreen(document.querySelector(‘#video‘));
});
window.setTimeout(function exit(){
exitFullscreen();
},5*1000);
};
</script>
</body>
</html>
html5 video全屏实现方式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。