摘要: html5 video全屏实现方式

首先来说，这个标题具有误导性，但这样设置改标题也是主要因为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 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>
 

~~~~~~~~~~~~~~~~~~~~2014-11-30 更新，已修复的buglist如下~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  1. bug，之前写的Demo 不能做到很好的兼容 firefox全屏失败

FullScreenDeniedNotInputDriven=全屏请求被拒绝，因为 Element.mozRequestFullScreen() 不是在一个短期运行的由用户引发的事件处理代码段中运行的。

2.bug IE浏览器无法全屏，这里只让它放大了

3.IE浏览器无法判断是否全屏

4.之前忽略了 欧朋浏览器

原 HTML5 requestFullScreen&exitFullscreen全屏兼容方案的更多相关文章

  1. H5 video全屏与取消全屏兼容

    H5 video全屏与取消全屏各浏览器兼容,  requestFullscreen()全屏方法,exitFullscreen()退出全屏方法.兼容各个浏览器与css3兼容一样加个前缀即可. // 全屏 ...

  2. requestFullscreen实现全屏展示

    requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...

  3. HTML5轻松实现全屏视频背景

    想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...

  4. html5下F11全屏化的几点注意

    1.实现全屏化 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestF ...

  5. html5 自带全屏API调用方法

    function FullScreen(){ var el = $('html')[0];//要全屏的元素,如果要全页面全屏,建议使用html节点而不是body节点 var isFullscreen= ...

  6. HTML5微信播放全屏问题的解决方法

    在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题 解决办法:给vi ...

  7. Android 使WebView支持HTML5 Video（全屏）播放的方法

    http://blog.csdn.net/zrzlj/article/details/8050633  1)需要在AndroidManifest.xml文件中声明需要使用HardwareAcceler ...

  8. 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. html5——全屏显示

    基本概念 1.HTML5规范允许用户自定义网页上任一元素全屏显示 2.requestFullscreen() 开启全屏显示.cancleFullscreen() 关闭全屏显示 3.不同浏览器兼容性不一 ...

随机推荐

  1. 在TOMCAT下配置工程的默认访问设置（转）

    对工程的部署一般是将工程的压缩文件放在tomcat安装目录的webapps下,访问时通过键入:http://localhost:8080/xx(假定为本机访问,xx是部署时的应用工程的访问名字). 而 ...

  2. jqueryui插件slider的简单使用

    <!DOCTYPE html> <html> <head> <title>slider</title> <meta charset=& ...

  3. linux shell 数组建立及使用技巧

    参考网址:http://www.cnblogs.com/chengmo/archive/2010/09/30/1839632.html linux shell在编程方面比windows 批处理强大太多 ...

  4. winform生成条形码和二维码(ZXing.Net)

    首先在项目添加ZXing.Net. 工具-->Nuget包管理器-->Nuget程序包  在所搜栏输入 ZXing.Net 如下图: 添加完成后会看见: 效果图: 所有代码: /// &l ...

  5. 洛谷P3317 [SDOI2014]重建 [Matrix-Tree定理]

    传送门 思路 相信很多人像我一样想直接搞Matrix-Tree定理,而且还过了样例,然后交上去一分没有. 但不管怎样这还是对我们的思路有一定启发的. 用Matrix-Tree定理搞,求出的答案是 \[ ...

  6. C#实现向excel中插入行列，以及设置单元格合并居中效果

    插入空行: Microsoft.Office.Interop.Excel.Workbook xlsWorkbook; Microsoft.Office.Interop.Excel.Worksheet ...

  7. C# Excel行高、列宽、合并单元格、单元格边框线、冻结

    private _Workbook _workBook = null;private Worksheet _workSheet = null;private Excel.Application _ex ...

  8. vue.js的学习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 使用Eclipse进行Makefile项目

    最近在MCU on Eclipse网站上看到Erich Styger所写的一篇有关在Eclipse中使用Makefile创建项目的文章,文章讲解清晰明了非常不错,所以呢没人将其翻译过来供各位同仁参考. ...

  10. functions 示例

    示例1:  ","字符串截取 CREATE OR REPLACE FUNCTION splitstr(p_string IN VARCHAR2, p_delimiter IN VA ...