点击图片video全屏

时间 2019-11-20

标签点击图片 video 全屏繁體版

原文原文链接

  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 controls="controls" preload="preload" id="video" poster="poster.jpg">
 57                 <source src="./video.ogg" type="video/ogg" />
 58                 <source src="./video.mp4" type="video/mp4" />   //最好把MP4格式的放在第一行  这样避免找不到上面的格式而报错
 59                 <source src="./video.webm" type="video/webm" />
 60                 <object data="./video.mp4" width="100%" height="100%">      //项目中发如今火狐中点击全屏播放后再推出全屏视频依然在播放，把这里的object标签删除后解决问题
 61                     <embed width="100%" height="100%" src="./movie.swf" />
 62                 </object>
 63             </video>
 64             <button id="fullScreenBtn">全屏</button>
 65         </div>
 66 
 67         <script type="text/javascript">
 68             //反复掉用
 69             var invokeFieldOrMethod = function(element, method) {
 70                 var usablePrefixMethod;
 71                 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
 72                     if(usablePrefixMethod) return;
 73                     if(prefix === "") {
 74                         // 无前缀，方法首字母小写
 75                         method = method.slice(0, 1).toLowerCase() + method.slice(1);
 76                     }
 77                     var typePrefixMethod = typeof element[prefix + method];
 78                     if(typePrefixMethod + "" !== "undefined") {
 79                         if(typePrefixMethod === "function") {
 80                             usablePrefixMethod = element[prefix + method]();
 81                         } else {
 82                             usablePrefixMethod = element[prefix + method];
 83                         }
 84                     }
 85                 });
 86 
 87                 return usablePrefixMethod;
 88             };
 89 
 90             //进入全屏
 91             function launchFullscreen(element) {
 92                 //此方法不能够在异步任务中执行，不然火狐無法全屏
 93                 if(element.requestFullscreen) {     //这里用来判断的是各个浏览器用来实现全屏的api（下面有介绍）
 94                     element.requestFullscreen();
 95                 } else if(element.mozRequestFullScreen) {
 96                     element.mozRequestFullScreen();
 97                 } else if(element.msRequestFullscreen) {
 98                     element.msRequestFullscreen();
 99                 } else if(element.oRequestFullscreen) {
100                     element.oRequestFullscreen();
101                 } else if(element.webkitRequestFullscreen) {
102                     element.webkitRequestFullScreen();
103                 } else {
104 
105                     var docHtml = document.documentElement;
106                     var docBody = document.body;
107                     var videobox = document.getElementById('videobox');
108                     var cssText = 'width:100%;height:100%;overflow:hidden;';
109                     docHtml.style.cssText = cssText;
110                     docBody.style.cssText = cssText;
111                     videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;';
112                     document.IsFullScreen = true;
113 
114                 }
115             }
116             //退出全屏
117             function exitFullscreen() {
118                 if(document.exitFullscreen) {
119                     document.exitFullscreen();
120                 } else if(document.msExitFullscreen) {
121                     document.msExitFullscreen();
122                 } else if(document.mozCancelFullScreen) {
123                     document.mozCancelFullScreen();
124                 } else if(document.oRequestFullscreen) {
125                     document.oCancelFullScreen();
126                 } else if(document.webkitExitFullscreen) {
127                     document.webkitExitFullscreen();
128                 } else {
129                     var docHtml = document.documentElement;
130                     var docBody = document.body;
131                     var videobox = document.getElementById('videobox');
132                     docHtml.style.cssText = "";
133                     docBody.style.cssText = "";
134                     videobox.style.cssText = "";
135                     document.IsFullScreen = false;
136                 }
137             }
138             document.getElementById('fullScreenBtn').addEventListener('click', function() {
139                 launchFullscreen(document.getElementById('video'));
140                 window.setTimeout(function exit() {
141                     //检查浏览器是否处于全屏
142                     if(invokeFieldOrMethod(document, 'FullScreen') || invokeFieldOrMethod(document, 'IsFullScreen') || document.IsFullScreen) {
143                         exitFullscreen();
144                     }
145                 }, 5 * 1000);
146             }, false);
147         </script>
148     </body>
149 
150 </html>

项目中借助amazeui解决ie浏览器中推出全屏播放后不能暂停的问题 <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>javascript

 1 document.getElementById('fullScreenBtn').addEventListener('click', function() {
 2     launchFullscreen(document.getElementById('video'));
 3     document.getElementById('video').style.display = "block";
 4     document.getElementById('video').play();
 5 }, false);
 6 
 7 document.addEventListener("webkitfullscreenchange",function(e) {
 8 console.log('webkit');
 9 if (!document.webkitIsFullScreen) { //退出全屏暂停视频
10     document.getElementById('video').pause();
11     };
12 }, false);
13 document.addEventListener('mozfullscreenchange', function(e){
14   console.log('moz');
15   //alert(1)
16 if (!document.mozFullScreen) { //退出全屏暂停视频
17     document.getElementById('video').pause();
18     };
19 }, false);
20 
21 $(document).on($.AMUI.fullscreen.raw.fullscreenchange, function () {
22         console.log('change');
23   if (!!window.ActiveXObject || "ActiveXObject" in window) { //判断是不是ie浏览器
24     document.getElementById('video').pause();
25   };
26 });

View Code

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

poster	xxx.jpg/ 图片地址	设置视屏没有播放以前显示的图片

fullscreen API 接口

属性1：fullscreenElement 该属性返回当前处于全屏模式的DOM元素。web

属性2：fullscreenEnabled 该属性返回当前 document 是否进入了能够请求全屏模式的状态。chrome

方法1：requestFullscreen() 请求进入全屏模式。canvas

方法2：exitFullscreen() 退出全屏模式。api

事件1：fullscreenchange 进入/退出全屏模式切换时会触发。

事件2：fullscreenerror 进入/退出全屏模式失败时会触发。

因为fullscreen API 存在浏览器兼容性问题，因此咱们在使用的时候须要进行跨浏览器处理，参考代码：

跨浏览器返回正处于全屏的元素

function fullscreenElement(){

var fullscreenEle = document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement;

//注意：要在用户受权全屏后才能获取全屏的元素，不然 fullscreenEle为null

console.log("全屏元素："+fullscreenEle);

return fullscreenEle;

}

跨浏览器返回当前 document 是否进入了能够请求全屏模式的状态

function fullscreenEnable(){

var isFullscreen = document.fullscreenEnabled ||

window.fullScreen ||

document.webkitIsFullScreen ||

document.msFullscreenEnabled;

//注意：要在用户受权全屏后才能准确获取当前的状态

if(isFullscreen){

console.log('全屏模式');

}else{

console.log('非全屏模式');

}

跨浏览器发动全屏

function lanchFullscreen(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.mozCancelFullScreen){

document.mozCancelFullScreen();

}

else if(document.msExitFullscreen){

document.msExiFullscreen();

}

else if(document.webkitCancelFullScreen){

document.webkitCancelFullScreen();

}

各浏览器fullscreenchange 事件处理

document.addEventListener('fullscreenchange', function(){ /*code*/ });

document.addEventListener('webkitfullscreenchange', function(){ /*code*/});

document.addEventListener('mozfullscreenchange', function(){ /*code*/});

document.addEventListener('MSFullscreenChange', function(){ /*code*/});

各浏览器fullscreenerror 事件处理

document.addEventListener('fullscreenerror', function(){ /*code*/ });

document.addEventListener('webkitfullscreenerror', function(){ /*code*/});

document.addEventListener('mozfullscreenerror', function(){ /*code*/);

document.addEventListener('MSFullscreenError', function(){ /*code*/ });

跨浏览器全屏模式下样式代码

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

【css伪类】

:fullscreen – 当前全屏化的元素

:fullscreen-ancestor – 全部全屏化元素的祖先元素

【标签属性】

相关注意事项：

1）在safari和chrome下，全屏后的元素全自动全屏居中，且背景色变为黑色。我尝试过经过给body设背景色来改变下背景色的颜色，失败。在firefox下，全屏后的背景色为全屏那个元素的背景色，且元素并不居中。若是给body调全屏，在webkit内核的浏览器下和按11进入的全屏效果差得很远，主要是背景色问题，而firefox下则效果接近于f11全屏——固然仍是有区别，好比进入全屏的动画过程就不相同。

2）退出全屏是经过给document来调来cancelFullScreen方法，但若是想让页面全部元素所有进入全屏的话，不能给document调requestFullScreen，只能给body调。

3）onFullScreenChange事件的回调，在safari里不能写alert，若是写alert，点击后会自动退出全屏。

4）按f11进入的全屏，onFullScreenChange事件不会响应。

5）进入全屏必定要点击某个节点，不能直接调进入全屏api。mouseover、mousemove等接近onload的事件也不行。click、mousedown、mouseup事件能够。策略应该同window.open应该是同样的。

6）ios暂不支持全屏api。

这里有更加详细的介绍：http://blog.csdn.net/tywali/article/details/8623938

这里有一个问题，就是通常要的效果是当你点击完图片之后出现的视屏应该自动的播放，上面的autoplay属性只能在视屏框架没有加载完成的状况下才有效，就是说你必需要加在html里面才行

1 <video src="video.mp4" controls="controls" autoplay="autoplay" id="video" poster="poster.jpg">

你要是想动态添加autoplay属性的话是不生效的

document.getElementById('fullScreenBtn').addEventListener('click', function() {
    document.getElementById('video').setAttribute('autoplay','autoplay') //这里就是点击一个按钮图片或者一个什么元素来动态添加autoplay属性
}, false);

像上面代码中经过点击事件动态的添加属性是不生效的，由于在你点击以前视屏框架就已经加载完成了，这样就达不到上面说的那种用户一点击弹出视屏后自动播放的效果，那么怎么解决这个问题

其实video提供了两个方法

var x = document.getElementById("myVideo"); 

function playVid()
  { 
  x.play();  // 播放
  } 

function pauseVid()
  { 
  x.pause();   //暂停
  }

这样的话就能够解决上面说的那个问题，把上面的点击事件改一下就能够了

document.getElementById('fullScreenBtn').addEventListener('click', function() {
    document.getElementById('video').play();
}, false);

还有里面用到的full screen的一些相关资料（补充上面提到的全屏api）：

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 具体介绍

amazeui里面的js插件里有一个全屏切换插件http://amazeui.org/javascript/fullscreen

以前项目中主页视屏的ie兼容问题就是用这个插件解决