UDN-企业互联网技术人气社区

板块导航

浏览  : 1020
回复  : 5

[HTML5] HTML5 video播放器全屏(fullScreen)方法实例

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-15 12:52:45 | 显示全部楼层 |阅读模式

首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多


在html5中,全屏方法可以适用于很多html 元素,不仅仅是video


  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>全屏问题</title>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  7. <meta http-equiv="imagetoolbar" content="no"/>
  8. <meta name="apple-mobile-web-app-capable" content="yes"/>
  9. <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  10. <style type="text/css">
  11. *{
  12. padding: 0px;
  13. margin: 0px;
  14. }

  15. body div.videobox{
  16. width: 400px;
  17. height: 320px;
  18. margin: 100px auto;
  19. background-color:#000;
  20. }

  21. body div.videobox video.video
  22. {
  23. width: 100%;
  24. height: 100%;
  25. }

  26. :-webkit-full-screen {

  27. }

  28. :-moz-full-screen {

  29. }

  30. :-ms-fullscreen {

  31. }

  32. :-o-fullscreen {

  33. }

  34. :full-screen {

  35. }

  36. :fullscreen {

  37. }

  38. :-webkit-full-screen video {
  39. width: 100%;
  40. height: 100%;
  41. }
  42. :-moz-full-screen video{
  43. width: 100%;
  44. height: 100%;
  45. }
  46. </style>
  47. </head>
  48. <body>


  49. <div id="videobox">

  50. <video controls="controls" preload="preload" id="video" poster="poster.jpg">
  51. <source src="./movie.ogg" type="video/ogg" />
  52. <source src="./movie.mp4" type="video/mp4" />
  53. <source src="./movie.webm" type="video/webm" />
  54. <object data="./movie.mp4" width="100%" height="100%">
  55. <embed width="100%" height="100%" src="./movie.swf" />
  56. </object>

  57. </video>
  58. <button id="fullScreenBtn">全屏</button>
  59. </div>


  60. <script type="text/javascript">

  61. //反射用
  62. var invokeFieldOrMethod = function(element, method)
  63. {
  64. var usablePrefixMethod;
  65. ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
  66. if (usablePrefixMethod) return;
  67. if (prefix === "") {
  68. // 无前缀,方法首字母小写
  69. method = method.slice(0,1).toLowerCase() + method.slice(1);  
  70. }
  71. var typePrefixMethod = typeof element[prefix + method];
  72. if (typePrefixMethod + "" !== "undefined") {
  73. if (typePrefixMethod === "function") {
  74. usablePrefixMethod = element[prefix + method]();
  75. } else {
  76. usablePrefixMethod = element[prefix + method];
  77. }
  78. }
  79. });

  80. return usablePrefixMethod;
  81. };

  82. //入全屏
  83. function launchFullscreen(element)
  84. {
  85. //此方法不可以在步任中行,否火狐法全屏
  86. if(element.requestFullscreen) {
  87. element.requestFullscreen();
  88. } else if(element.mozRequestFullScreen) {
  89. element.mozRequestFullScreen();
  90. } else if(element.msRequestFullscreen){
  91. element.msRequestFullscreen();  
  92. } else if(element.oRequestFullscreen){
  93. element.oRequestFullscreen();
  94. }
  95. else if(element.webkitRequestFullscreen)
  96. {
  97. element.webkitRequestFullScreen();
  98. }else{

  99. var docHtml = document.documentElement;
  100. var docBody = document.body;
  101. var videobox = document.getElementById('videobox');
  102. var cssText = 'width:100%;height:100%;overflow:hidden;';
  103. docHtml.style.cssText = cssText;
  104. docBody.style.cssText = cssText;
  105. videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
  106. document.IsFullScreen = true;

  107. }
  108. }
  109. //退出全屏
  110. function exitFullscreen()
  111. {
  112. if (document.exitFullscreen) {
  113. document.exitFullscreen();
  114. } else if (document.msExitFullscreen) {
  115. document.msExitFullscreen();
  116. } else if (document.mozCancelFullScreen) {
  117. document.mozCancelFullScreen();
  118. } else if(document.oRequestFullscreen){
  119. document.oCancelFullScreen();
  120. }else if (document.webkitExitFullscreen){
  121. document.webkitExitFullscreen();
  122. }else{
  123. var docHtml = document.documentElement;
  124. var docBody = document.body;
  125. var videobox = document.getElementById('videobox');
  126. docHtml.style.cssText = "";
  127. docBody.style.cssText = "";
  128. videobox.style.cssText = "";
  129. document.IsFullScreen = false;
  130. }
  131. }
  132. document.getElementById('fullScreenBtn').addEventListener('click',function(){
  133. launchFullscreen(document.getElementById('video'));
  134. window.setTimeout(function exit(){
  135. //查器是否於全屏
  136. if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)
  137. {
  138. exitFullscreen();
  139. }
  140. },5*1000);
  141. },false);

  142. </script>
  143. </body>

  144. </html>
复制代码




相关帖子

发表于 2015-8-10 19:26:51 | 显示全部楼层
说是html5 其实都是js和css3
使用道具 举报

回复

发表于 2015-8-13 14:42:09 | 显示全部楼层
不知道大家有没有注意到,html5和云的概念是对应有关联的性的
点评 ( 2 ) 收起 / 展开点评

友美C_cup 2015年08月13日 17:33 详情 回复

注意到了

友美C_cup 2015年08月13日 17:33 详情 回复

注意到了

使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-13 17:33:46 | 显示全部楼层
一路西游QQ 发表于 2015-8-13 14:42
不知道大家有没有注意到,html5和云的概念是对应有关联的性的

注意到了
使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-13 17:33:47 | 显示全部楼层
一路西游QQ 发表于 2015-8-13 14:42
不知道大家有没有注意到,html5和云的概念是对应有关联的性的

注意到了
使用道具 举报

回复

发表于 2015-8-14 04:49:58 | 显示全部楼层
唉,捧了这么久,HTML5还是没热起来
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部