HTML5 video播放器全屏(fullScreen)实现的方法

首先来说，这个标题具有误导性，但这样设置改标题也是主要因为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)实现的方法的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。