點擊圖片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

相關屬性：css

autoplay	autoplay	若是出現該屬性，則視頻在就緒後立刻播放。
controls	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
height	pixels	設置視頻播放器的高度。
loop	loop	若是出現該屬性，則當媒介文件完成播放後再次開始播放。
preload	preload	若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。html 若是使用 "autoplay"，則忽略該屬性。html5
src	url	要播放的視頻的 URL。
width	pixels	設置視頻播放器的寬度。java

poster	xxx.jpg/ 圖片地址	設置視屏沒有播放以前顯示的圖片

全屏api拓展：ios

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兼容問題就是用這個插件解決

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。