摘要: 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. 【转】C++标准转换运算符reinterpret_cast

    reinterpret_cast<new_type> (expression) reinterpret_cast运算符是用来处理无关类型之间的转换:它会产生一个新的值,这个值会有与原始参数 ...

  2. openwrt页面显示问题修改

    页面显示错误如下: 在不应该的位置显示了这个,查看配置文件: config igmpproxy        option quickleave '1' config phyint         o ...

  3. UDP/TCP拾遗

    1.UDP的特点 (1)UDP 是无连接的,即发送数据之前不需要建立连接. (2)UDP 使用尽最大努力交付,即不保证可靠交付,同时也不使用拥塞控制. (3)UDP 是面向报文的.UDP 没有拥塞控制 ...

  4. Golang 优化之路-空结构[转]

    写在前面 开发 hashset 常用的套路: map[int]int8 map[int]bool 我们一般只用 map 的键来保存数据,值是没有用的.所以来缓存集合数据会造成内存浪费. 空对象 空对象 ...

  5. （二）远程代理Remoting/RealProxy

    使用.Net Remoting/RealProxy 采用TransparentProxy和RealProxy实现对象的代理,实现思路如下:Client -TransparentProxy - Real ...

  6. 常见的SQL调优（SQL Tuning）Tips

    建立适当的索引(参考<正确建立数据库索引的姿势>)   用UNION替换OR (适用于索引列)   用exist.not exist代替 in.not in   不要以字符格式声明数字(会 ...

  7. git bash的命令

    git bash cd /f   该命令可以把当前目录切换到f盘 git clone git上的项目的url

  8. docker的安装及项目部署

    Making Docker and Deployment Process Step: set up your docker environment build a image of activeMQ ...

  9. iOS9 新功能：Support Universal Links，iOS10 openUrl新函数

    先看官方文档:https://developer.apple.com/library/ios/documentation/General/Conceptual/AppSearch/UniversalL ...

  10. Js操作Array数组

    之前写过一篇文章,但是很模糊,不过却给我提供了一个思路,所以没有删除,这次写的是一个完善版本! 因为在很多的时候我们在选中了几行数据,然后存放在Array中,如下图: 看下控制台的数据 我双击了这两个 ...