video点击全屏

时间：2017-04-12 12:26:46 阅读：562 评论：0 收藏：0 [点我收藏+]

  1 <!doctype html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8" />
  6         <title>全屏问题</title>
  7         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  8         <meta http-equiv="imagetoolbar" content="no" />
  9         <meta name="apple-mobile-web-app-capable" content="yes" />
 10         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 11         <style type="text/css">
 12             * {
 13                 padding: 0px;
 14                 margin: 0px;
 15             }
 16             
 17             body div.videobox {
 18                 width: 400px;
 19                 height: 320px;
 20                 margin: 100px auto;
 21                 background-color: #000;
 22             }
 23             
 24             body div.videobox video.video {
 25                 width: 100%;
 26                 height: 100%;
 27             }
 28             
 29             :-webkit-full-screen {}
 30             
 31             :-moz-full-screen {}
 32             
 33             :-ms-fullscreen {}
 34             
 35             :-o-fullscreen {}
 36             
 37             :full-screen {}
 38             
 39             :fullscreen {}
 40             
 41             :-webkit-full-screen video {
 42                 width: 100%;
 43                 height: 100%;
 44             }
 45             
 46             :-moz-full-screen video {
 47                 width: 100%;
 48                 height: 100%;
 49             }
 50         </style>
 51     </head>
 52 
 53     <body>
 54 
 55         <div id="videobox">
 56             <video src="video.mp4" controls="controls" preload="preload" id="video" poster="poster.jpg">
 57             </video>
 58             <button id="fullScreenBtn">全屏</button>
 59         </div>
 60 
 61         <script type="text/javascript">
 62             //反射調用
 63             var invokeFieldOrMethod = function(element, method) {
 64                 var usablePrefixMethod;
 65                 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
 66                     if(usablePrefixMethod) return;
 67                     if(prefix === "") {
 68                         // 无前缀，方法首字母小写
 69                         method = method.slice(0, 1).toLowerCase() + method.slice(1);
 70                     }
 71                     var typePrefixMethod = typeof element[prefix + method];
 72                     if(typePrefixMethod + "" !== "undefined") {
 73                         if(typePrefixMethod === "function") {
 74                             usablePrefixMethod = element[prefix + method]();
 75                         } else {
 76                             usablePrefixMethod = element[prefix + method];
 77                         }
 78                     }
 79                 });
 80 
 81                 return usablePrefixMethod;
 82             };
 83 
 84             //進入全屏
 85             function launchFullscreen(element) {
 86                 //此方法不可以在異步任務中執行，否則火狐無法全屏
 87                 if(element.requestFullscreen) {
 88                     element.requestFullscreen();
 89                 } else if(element.mozRequestFullScreen) {
 90                     element.mozRequestFullScreen();
 91                 } else if(element.msRequestFullscreen) {
 92                     element.msRequestFullscreen();
 93                 } else if(element.oRequestFullscreen) {
 94                     element.oRequestFullscreen();
 95                 } else if(element.webkitRequestFullscreen) {
 96                     element.webkitRequestFullScreen();
 97                 } else {
 98 
 99                     var docHtml = document.documentElement;
100                     var docBody = document.body;
101                     var videobox = document.getElementById(‘videobox‘);
102                     var cssText = ‘width:100%;height:100%;overflow:hidden;‘;
103                     docHtml.style.cssText = cssText;
104                     docBody.style.cssText = cssText;
105                     videobox.style.cssText = cssText + ‘;‘ + ‘margin:0px;padding:0px;‘;
106                     document.IsFullScreen = true;
107 
108                 }
109             }
110             //退出全屏
111             function exitFullscreen() {
112                 if(document.exitFullscreen) {
113                     document.exitFullscreen();
114                 } else if(document.msExitFullscreen) {
115                     document.msExitFullscreen();
116                 } else if(document.mozCancelFullScreen) {
117                     document.mozCancelFullScreen();
118                 } else if(document.oRequestFullscreen) {
119                     document.oCancelFullScreen();
120                 } else if(document.webkitExitFullscreen) {
121                     document.webkitExitFullscreen();
122                 } else {
123                     var docHtml = document.documentElement;
124                     var docBody = document.body;
125                     var videobox = document.getElementById(‘videobox‘);
126                     docHtml.style.cssText = "";
127                     docBody.style.cssText = "";
128                     videobox.style.cssText = "";
129                     document.IsFullScreen = false;
130                 }
131             }
132             document.getElementById(‘fullScreenBtn‘).addEventListener(‘click‘, function() {
133                 launchFullscreen(document.getElementById(‘video‘));
134                 window.setTimeout(function exit() {   //这里定时器控制视屏放多久自动关闭
135                     //检查浏览器是否全屏
136                     if(invokeFieldOrMethod(document, ‘FullScreen‘) || invokeFieldOrMethod(document, ‘IsFullScreen‘) || document.IsFullScreen) {
137                         exitFullscreen();
138                     }
139                 }, 5 * 1000); 
140             }, false);
141         </script>
142     </body>
143 
144 </html>

相关属性：

autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

　　　　　　　　　poster="poster.jpg" 这个属性是设置视屏没有播放之前显示的图片

还有里面用到的full screen的一些相关资料：

1 element.requestFullScreen()

作用：请求某个元素element全屏

2
Document.getElementById(“myCanvas”).requestFullScreen()

这里是将其中的元素ID去请求fullscreen

3
退出全屏
document.cancelFullScreen()

4
Document.fullScreen

如果用户在全屏模式下，则返回true
5 document.fullScreenElement
返回当前处于全屏模式下的元素

下面的代码是开启全屏模式：

1 function fullScreen(element) {  
2   if(element.requestFullScreen) {  
3     element.requestFullScreen();  
4   } else if(element.webkitRequestFullScreen ) {  
5     element.webkitRequestFullScreen();  
6   } else if(element.mozRequestFullScreen) {  
7     element.mozRequestFullScreen();  
8   }  
9 }

下面的代码就是整个页面调用全屏模式
var html = document.documentElement;
fullScreen(html);
下面的则是对指定元素，比如
var canvas = document.getElementById(‘mycanvas‘);
fullScreen(canvas);
如果要取消，同样：

 1 // the helper function  
 2 function fullScreenCancel() {  
 3   if(document.requestFullScreen) {  
 4     document.requestFullScreen();  
 5   } else if(document .webkitRequestFullScreen ) {  
 6     document.webkitRequestFullScreen();  
 7   } else if(document .mozRequestFullScreen) {  
 8     document.mozRequestFullScreen();  
 9   }  
10 }  
11   
12   
13 fullScreenCancel();

http://jackyrong.iteye.com/blog/1830273 具体介绍

video点击全屏

原文：http://www.cnblogs.com/colaman/p/6698567.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)