zoukankan      html  css  js  c++  java

  • 点击图片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                  400px;
 19                 height: 320px;
 20                 margin: 100px auto;
 21                 background-color: #000;
 22             }
 23             
 24             body div.videobox video.video {
 25                  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                  100%;
 43                 height: 100%;
 44             }
 45             
 46             :-moz-full-screen video {
 47                  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 = '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>
    


    

    

     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


    如果出现该属性，则视频在页面加载时进行加载，并预备播放。
    

    如果使用 "autoplay"，则忽略该属性。
    
    		

    

    
src
url
要播放的视频的 URL。

    

    
width
pixels


    设置视频播放器的宽度。
    
    		

    
    

    

    


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

    

    
 
 
 

    
    

    


    全屏api拓展：
    

    fullscreen API 接口
    

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

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

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

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

    事件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 – 所有全屏化元素的祖先元素
    


    【标签属性】
    


    <iframe width=”640″ height=”360″ src=”” allowfullscreen=””></iframe>
    

    相关注意事项：
    

    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兼容问题就是用这个插件解决
    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  吴裕雄--天生自然Numpy库学习笔记：NumPy 字节交换
                    
    吴裕雄--天生自然Numpy库学习笔记：NumPy 排序、条件刷选函数
                    
    吴裕雄--天生自然Numpy库学习笔记：NumPy 统计函数
                    
    吴裕雄--天生自然Numpy库学习笔记：NumPy 算术函数
                    
    吴裕雄--天生自然Numpy库学习笔记：NumPy 数学函数
                    
    吴裕雄--天生自然Numpy库学习笔记：NumPy 字符串函数
                    
    吴裕雄--天生自然Numpy库学习笔记：NumPy 位运算
                    
    吴裕雄--天生自然Numpy库学习笔记：Numpy 数组操作
                    
    吴裕雄--天生自然Numpy库学习笔记：NumPy 迭代数组
                    
    CodeForces
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/colaman/p/6698567.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看