首先來說，這個標題具有誤導性，但這樣設置改標題也是主要因為video使用的比較多

在html5中，全屏方法可以適用于很多html 元素，不僅僅是video

 !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 p.videobox{ width: 400px; height: 320px; margin: 100px auto; background-color:#000;body p.videobox video.videowidth: 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 
 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 
 [ 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 

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！

相關推薦：

HTML5 video標簽的播放控制

關于H5新屬性audio音頻和video視頻的控制解析

以上就是HTML5 video播放器全屏(fullScreen)實現的方法的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。