html5 video全屏实现方式

浏览数：37 / 时间：2015年06月09日

首先来说，这个标题具有误导性，但这样设置改标题也是主要因为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="./movie.ogg" type="video/ogg" />
		  <source src="./movie.mp4" type="video/mp4" />
		  <source src="./movie.webm" type="video/webm" />
		  <object data="./movie.mp4" width="400px" height="300px">
		    <embed width="400px" height="300px" src="./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全屏实现方式