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

板块导航

浏览  : 757
回复  : 1

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

[复制链接]
令狐的头像 楼主
发表于 2015-6-8 12:14:23 | 显示全部楼层 |阅读模式
  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-9-2 09:09:49 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

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

本版积分规则

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