摘要: 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. 2-HTML Text Formatting Elements

    下表列举了文字格式常见的关键字 Tag Description <b> Defines bold text <em> Defines emphasized text  < ...

  2. 正版phpstorm，webstorm，goland（Jetbrains系列都可以）免费激活步骤（图文详解）(亲测有效)

    1 前言 Jetbrains系列都可以,包括webstrom,phpstorm,goland等. 附加其它方案如下: webstrom(注册机) goland(破解补丁) 2 步骤 1. 可以先试用, ...

  3. Dubbo原理解析-Dubbo内核实现之SPI简单介绍

    转自:https://blog.csdn.net/quhongwei_zhanqiu/article/details/41577159 Dubbo 采用微内核+插件体系,使得设计优雅,扩展性强.那所谓 ...

  4. GridView的stretchMode属性

    stretchMode属性值的作用是设置GridView中的条目以什么缩放模式去填充剩余空间.参数stretchMode 可选值为:none,spacingWidth,columnWidth, spa ...

  5. 关于《common-net》的ftp上传

    1:jar的maven的引用: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  6. Confluence 6 编辑和删除用户宏

    编辑一个用户宏 希望对一个用户宏进行编辑: 进入  > 基本配置(General Configuration) > 用户宏(User Macros) 在相关的宏的边上,单击 编辑(Edit ...

  7. （不断更新）关于显著性检测的调研-Salient Object Detection: A Survey

    <Salient Object Detection: A Survey>作者:Ali Borji.Ming-Ming Cheng.Huaizu Jiang and Jia Li 基本按照文 ...

  8. Solver Of Caffe

    本文旨在解决如何编写solver文件. Solver的流程: 1.     设计好需要优化的对象,以及用于学习的训练网络和用于评估的测试网络.(通过调用另外一个配置文件prototxt来进行) 2.  ...

  9. web.xml中的ContextLoaderListener和DispatcherServlet区别

    ContextLoaderListener和DispatcherServlet都会在Web容器启动的时候加载一下bean配置. 区别在于: DispatcherServlet一般会加载MVC相关的be ...

  10. 【转】运维DBA的4大纪律9项注意

    朋友们调侃说,运维是个把脑袋别在裤腰带上的活,更有人说,运维是个把脑袋别在他人裤腰带上的活,苦劳没人认,有锅就有得背! 测试的同学说,“吃瓜群众很难感知运维背后的付出,倒是出了事情更能体现我们的专业性 ...