首先来说，这个标题具有误导性，但这样的设置改标题也是主要因为video使用的比较多
在html5中，全屏方法可以适用于很多html元素，多个视频
代码如下：
<！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”> * { 填充：0像素； 边距：0px; }正文div.videobox { 宽度：400像素； 高度：320像素； 边距：100px自动; 背景颜色：＃000; }正文div.videobox video.video {宽度：100％; 高度：100％; }
：-webkit-full-screen { } ：-moz-full-screen { } ：-ms-fullscreen { } ：-o-fullscreen { } ：full-screen { } ：fullscreen { } ：-webkit-full-screen video { 宽度：100％； 高度：100％; } ：-moz全屏视频{ 宽度：100％； 高度：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“
<source src =“ ./ movie.webm” type =“ video / webm” /> <object data =“ ./ movie.mp4” width =“ 100％” height =“ 100％”> <嵌入宽度=“ 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.slice （0,1）.toLowerCase（）+ method.slice（1）; }
var typePrefixMethod = typeof元素[前缀+方法]; if（typePrefixMethod +“”！==“未定义”）{ if（typePrefixMethod ===“ function”）{ usablePrefixMethod = element [prefix + method]（）; } else { usablePrefixMethod = element [prefix + method]; } } }）; 返回usablePrefixMethod; }; // //进入全屏功能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 ='宽度：100％;高度：100％;溢出：隐藏;'; docHtml.style.cssText = cssText; docBody.style.cssText = cssText; videobox.style.cssText = cssText +';'+'margin：0px; padding：0px;';
document.IsFullScreen = true; } } //退出全屏 功能exitFullscreen（） { if（document.exitFullscreen）{ document.exitFullscreen（）; }否则，如果（document.msExitFullscreen）{ document.msExitFullscreen（）; }否则，如果（document.mozCancelFullScreen）{ document.mozCancelFullScreen（）; } else if（document.oRequestFullscreen）{ document.oCancelFullScreen（）; }否则是否（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>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60490.shtml
