2. 程式人生 > >html中控制video標籤全屏

html中控制video標籤全屏

阿新 • • 發佈：2019-01-11
<!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;     background-color:#000; } body div.videobox video.video { width: 100%;     height: 100%; } :-webkit-full-screen { } :-moz-full-screen { } :-ms-fullscreen { } :-o-fullscreen { } :full-screen {  } :fullscreen { } :-webkit-full-screen video {   width: 100%;   height: 100%; } :-moz-full-screen video{     width: 100%;     height: 100%; }     </style> </head> <body> <div id="videobox">     <video 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="100%" height="100%">         <embed width="100%" height="100%" src="./movie.swf" />       </object>     </video>     <button id="fullScreenBtn">全屏</button> </div> <script type="text/javascript"> //反射呼叫 var invokeFieldOrMethod = function(element, method)  {    var usablePrefixMethod;    ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {        if (usablePrefixMethod) return;        if (prefix === "") {            // 無字首，方法首字母小寫            method = method.slice(0,1).toLowerCase() + method.slice(1);           }        var typePrefixMethod = typeof element[prefix + method];        if (typePrefixMethod + "" !== "undefined") {            if (typePrefixMethod === "function") {                usablePrefixMethod = element[prefix + method]();            } else {                usablePrefixMethod = element[prefix + method];            }        }    });        return usablePrefixMethod; }; //進入全屏  function launchFullscreen(element)     {     //此方法不可以在非同步任務中執行，否則火狐無法全屏      if(element.requestFullscreen) {        element.requestFullscreen();      } else if(element.mozRequestFullScreen) {        element.mozRequestFullScreen();      } else if(element.msRequestFullscreen){         element.msRequestFullscreen();        } else if(element.oRequestFullscreen){         element.oRequestFullscreen();     }     else if(element.webkitRequestFullscreen)      {        element.webkitRequestFullScreen();      }else{         var docHtml  = document.documentElement;         var docBody  = document.body;         var videobox  = document.getElementById('videobox');         var  cssText = 'width:100%;height:100%;overflow:hidden;';         docHtml.style.cssText = cssText;         docBody.style.cssText = cssText;         videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';         document.IsFullScreen = true;       }    } //退出全屏    function exitFullscreen()    {        if (document.exitFullscreen) {          document.exitFullscreen();        } else if (document.msExitFullscreen) {          document.msExitFullscreen();        } else if (document.mozCancelFullScreen) {          document.mozCancelFullScreen();        } else if(document.oRequestFullscreen){             document.oCancelFullScreen();         }else if (document.webkitExitFullscreen){          document.webkitExitFullscreen();        }else{         var docHtml  = document.documentElement;         var docBody  = document.body;         var videobox  = document.getElementById('videobox');         docHtml.style.cssText = "";         docBody.style.cssText = "";         videobox.style.cssText = "";         document.IsFullScreen = false;     }   } document.getElementById('fullScreenBtn').addEventListener('click',function(){     launchFullscreen(document.getElementById('video'));      window.setTimeout(function exit(){ //檢查瀏覽器是否處於全屏 if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen) { exitFullscreen(); }    },5*1000); },false); </script> </body> </html>

相關推薦

html中控制video標籤全屏

<!doctype  html> <html> <head> <meta charset="utf-8" /> <title>全屏問題</title> <meta http-equiv="cont

【已解決】ios系統下video標籤全屏的問題解決方案

video標籤在ios上播放視訊時會預設全屏顯示，通過給video標籤新增下面屬性可以解決。<video id="welcome-video" src="" poster="./images/vo

html中的video標籤 方法_事件彙總

標籤的屬性 src ：視訊的屬性 poster：視訊封面，沒有播放時顯示的圖片 preload：預載入 autoplay：自動播放 loop：迴圈播放 controls：瀏覽器自帶的控制條 widt

手機影音第九天，控制視頻全屏播放與退出全屏播放，音量調節按鈕來控制視頻音量與靜音的實現

視頻的全屏播放 音量變化與靜音 代碼以托管到碼雲，有興趣的小夥伴可以下載看看 https://git.oschina.net/joy_yuan/MobilePlayer一、視頻全屏播放與退出全屏 系統默認的videoview類，沒有調整大小的方法，因此需要自定義一個類，繼承vide

第89天：HTML5中 訪問歷史、全屏和網頁存儲API

全屏顯示 cal img 一份 圖片 def api load replace 一、訪問歷史 API 通過history對象實現前進、後退和刷新之類的操作 history新增的兩個方法history.replaceState()和history.pushState()方法屬

java正則表示式去除html中所有的標籤和特殊HTML字元

關於java正則表示式去除html中所有的標籤和特殊HTML字元，結合我所做的專案總結的經驗： 總共分為三種：第一種適用於適用短的文章，將文章用正則表示式的方式拼接到程式碼中，有些繁瑣，其實不太實用。第二種就是直接將文件引入，進行更改，但是有一個小缺點，就是文件中的格式可能是utf-8格式的

html中的p標籤文字內容首字母縮排

<p class="parallax-alt" style="text-indent: 3em;">                  &

HTML5中新增video標籤的使用方法

HTML5的video標籤是HTML5的一大特色方法如下： 1、<video src="test.mp4">瀏覽器</video> 2、 <video><source src="test.3gp">瀏覽器</video>

HTML頁面原生VIDEO標籤隱藏下載按鈕功能

轉載連結：https://www.jb51.net/web/611648.html   使用如下CSS： video::-internal-media-controls-download-button {     display:no

通過HTML中的table標籤設定Web頁面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用table標籤設定Web頁面</title>

video禁止全屏播放

playsinline屬性完美解決 -webkit-playsinline、webkit-playsinline、playsinline是禁止全屏播放的三個相容性屬性，其中，playsinline可完美

H5中的video標籤使用

1，下面是一個播放視訊的最簡單樣例 （controls屬性告訴瀏覽器要有基本播放控制元件） <video src="hangge.mp4" controls></video> 2，通過width和height設定視訊視窗大小 <vi

HTML中input:file標籤的使用

如何簡單的使用 問題的由來 第一次看到別人在寫網頁，能夠上傳檔案？好高大上！自己就在想這是怎麼實現的？雖然當時沒想出來也沒有去百度了，但後來一次專案中我就需要處理檔案上傳這個操作。

關於html中使用img標籤顯示圖片問題

在html中使用<img>元素標籤，有這樣兩種情況： 一.沒有使用base標籤： 1.圖片和.html在同一個資料夾下，直接在src中寫上檔名即可； 2.如果不在一個資料夾下，那需要在sr

讓HTML頁面也可以實現全屏效果

JavaScript程式碼:function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement &am

手機端video預設全屏的相容寫法

需求：希望視訊播放時可以全屏播放，沒有進度條、播放按鈕等與系統相關的元素，視訊的寬度大於高度，並自動播放 瀏覽器效果展示： 實現全屏： 蘋果全屏相容，屬於文件內全屏 playsinline="true" x-webkit-airplay="true" webk

js控制頁面的全屏展示和退出全屏顯示的方法

<!DOCTYPE html>  <html>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <body>  <div style="margin:0 aut

HTML中的meta標籤

常用meta <meta charset='utf-8'> <!--宣告文件使用的字元編碼--> <meta name="description" content="不超過150個字元"/> <!--頁面描述--> &

PHP：使用php，迴圈html中的select標籤與Php資料

　　select標籤，我們都知道是下拉列表，這裡，我們使用foreach迴圈，將select中的資料進行輸出 　　 　　例子： 　　1、資料表：mimi_article，表中有個欄位，為1或0，表示著是或否 　　   　　2、通過php迴圈，將它輸出，並獲取資料庫中，當前記錄中readi

提取HTML中所有a標籤的href連結

/** * 提取html中a標籤的href * @param strs * @return */ public List<String> getAHref(String s