摘要: 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. js和thinkphp5路由拼接一个实例

    $.ajax({ type:"get", dataType:"json", url:"/home/index/ajax_page_data/cate_ ...

  2. 带你玩转Visual Studio——带你了解VC++各种类型的工程

    原文地址:http://blog.csdn.net/luoweifu/article/details/48816605 上一篇文章带你玩转Visual Studio——带你新建一个工程一文中提到新建一 ...

  3. hibernate框架学习之数据抓取(加载)策略helloworld

    package cn.itcast.h3.query.hql; import java.util.List; import org.hibernate.Query; import org.hibern ...

  4. hibernate框架学习之数据查询（HQL）helloworld

    package cn.itcast.h3.hql; import java.util.List; import org.hibernate.Query; import org.hibernate.Se ...

  5. Multisim 经典学习教程Step by Step

    Tracy Shields编著 ftp://ftp.ni.com/pub/branches/china/Practical%20teaching%20Ideas%20for%20Multisim%20 ...

  6. 51nod--1459 迷宫游戏 （dijkstra）

    1459 迷宫游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间,你就可 ...

  7. 前端 -----02 body标签中相关标签

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  8. [转]PhpStorm快捷键大全

    1 前言 PhPStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化debug功能.Phpstro ...

  9. vue入手

    https://www.jianshu.com/p/dc5057e7ad0d    (最全入坑教程) http://doc.liangxinghua.com/vue-family/1.4.html(v ...

  10. swift 学习- 26 -- 泛型

    // 泛型 代码能够让你根据自定义的需求,编写出适用于任意类型, 灵活可重用的函数以及类型, 它能让你避免代码的重复, 用一种清晰和抽象的方式来表达代码的意图 // 泛型是 Swift 最强大的特性之 ...