Video Full Screen In Tab

让所有视频网页全屏

当前为 2014-09-07 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Video Full Screen In Tab
  3. // @namespace http://www.icycat.com
  4. // @description 让所有视频网页全屏
  5. // @author 冻猫
  6. // @include *
  7. // @version 1.5
  8. // @grant none
  9. // @run-at document-end
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.  
  14. var btnDelay = null,
  15. isOver = false,
  16. fullStatus = false,
  17. parentArray = new Array(),
  18. backStyle = new Array(),
  19. player, playerStyle,controlBtn,leftBtn,rightBtn;
  20.  
  21. createButton();
  22. createFullButton();
  23.  
  24. console.log('Video Full Screen In Tab 初始化');
  25.  
  26. document.addEventListener('mouseover', function(e) {
  27. if (fullStatus) {
  28. return;
  29. }
  30. var target = e.target;
  31. var nodeName = target.nodeName;
  32. switch (nodeName) {
  33. case 'OBJECT':
  34. case 'EMBED':
  35. if (target.type == 'application/x-shockwave-flash' && target.offsetWidth > 299 && target.offsetHeight > 199) {
  36. player = target;
  37. showButton();
  38. }
  39. break;
  40. case 'IFRAME':
  41. case 'VIDEO':
  42. if (target.offsetWidth > 299 && target.offsetHeight > 199) {
  43. player = target;
  44. showButton();
  45. }
  46. break;
  47. default:
  48. if (isOver) return;
  49. if (controlBtn.style.display == 'inline') {
  50. if (btnDelay) clearTimeout(btnDelay);
  51. btnDelay = setTimeout(function() {
  52. controlBtn.style.display = 'none';
  53. }, 1000);
  54. }
  55. return;
  56. }
  57. });
  58.  
  59. function createButton() {
  60. addStyle('#playerControlBtn {display:none;cursor: pointer;font: 12px "微软雅黑";padding: 2px 2px 3px 2px;margin:0;width:60px;text-align: center;transition: all 0.6s ease-out;position: absolute;z-index:2147483646;background-color: #27A9D8;color:#FFF;opacity:0.5;} #playerControlBtn:hover{opacity:1;}');
  61. var btn = document.createElement('div');
  62. btn.id = 'playerControlBtn';
  63. btn.onclick = function() {
  64. playerControl();
  65. };
  66. btn.onmouseover = function() {
  67. isOver = true;
  68. if (btnDelay) clearTimeout(btnDelay);
  69. };
  70. btn.onmouseout = function() {
  71. isOver = false;
  72. if (btnDelay) clearTimeout(btnDelay);
  73. btnDelay = setTimeout(function() {
  74. controlBtn.style.display = 'none';
  75. }, 1000);
  76. }
  77. btn.appendChild(document.createTextNode('网页全屏'));
  78. document.body.appendChild(btn);
  79. controlBtn = document.getElementById('playerControlBtn');
  80. }
  81.  
  82. function createFullButton() {
  83. var leftButton = document.createElement('span');
  84. leftButton.id = 'leftFullStackButton';
  85. leftButton.onclick = function() {
  86. playerControl();
  87. };
  88. document.body.appendChild(leftButton);
  89. addStyle('#leftFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;left:0;z-index:2147483646;}');
  90. var rightButton = document.createElement('span');
  91. rightButton.id = 'rightFullStackButton';
  92. rightButton.onclick = function() {
  93. playerControl();
  94. };
  95. document.body.appendChild(rightButton);
  96. addStyle('#rightFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;right:0;z-index:2147483646;}');
  97. leftBtn = document.getElementById('leftFullStackButton');
  98. rightBtn = document.getElementById('rightFullStackButton');
  99. }
  100.  
  101. function showButton() {
  102. if (btnDelay) clearTimeout(btnDelay);
  103. var rect = player.getBoundingClientRect();
  104. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  105. var top = rect.top + scrollTop;
  106. var left = rect.left;
  107. controlBtn.style.display = 'inline';
  108. controlBtn.style.top = (top - 21) + 'px';
  109. controlBtn.style.left = (left + player.offsetWidth - 64) + 'px';
  110. }
  111.  
  112. function addStyle(css) {
  113. var style = document.createElement('style');
  114. style.type = 'text/css';
  115. var node = document.createTextNode(css);
  116. style.appendChild(node);
  117. document.head.appendChild(style);
  118. }
  119.  
  120. function playerControl() {
  121. checkPlayer();
  122. if (!fullStatus) {
  123. fullWin();
  124. } else {
  125. smallWin();
  126. }
  127. }
  128.  
  129. function checkPlayer() {
  130. parentArray = [];
  131. var full = player;
  132. while (full = full.parentNode) {
  133. if (full.getAttribute && full.nodeName != 'OBJECT') {
  134. parentArray.push(full);
  135. }
  136. if (full.nodeName == 'HTML') {
  137. break;
  138. }
  139. }
  140. }
  141.  
  142. function fullWin() {
  143. if (!fullStatus) {
  144. window.addEventListener('resize', fullWin, false);
  145. playerStyle = player.style.cssText;
  146. leftBtn.style.display = 'inline';
  147. rightBtn.style.display = 'inline';
  148. }
  149. for (var i = 0; i < parentArray.length; i++) {
  150. if (!fullStatus) {
  151. backStyle[i] = parentArray[i].style.cssText;
  152. }
  153. parentArray[i].style.cssText = 'width:100% !important;height:100% !important;max-width:100% !important;margin:0px !important;padding:0px !important;top:0px !important;left:0px !important;z-index:2147483645 !important;overflow:hidden !important;position:fixed !important;background:#000 !important;border:none !important;display:inline !important;';
  154. }
  155. player.style.cssText = 'width:calc(100% - 2px) !important;height:100% !important;z-index:2147483645 !important;position:relative !important;visibility:visible !important;display:inline !important;';
  156. var rect = player.getBoundingClientRect();
  157. player.style.left = (1-rect.left)+'px';
  158. player.style.top = (0-rect.top)+'px';
  159. controlBtn.style.display = 'none';
  160. console.log('网页全屏完成');
  161. fullStatus = true;
  162. }
  163.  
  164. function smallWin() {
  165. window.removeEventListener('resize', fullWin, false);
  166. for (var i = 0; i < parentArray.length; i++) {
  167. parentArray[i].style.cssText = backStyle[i];
  168. }
  169. player.style.cssText = playerStyle;
  170. leftBtn.style.display = 'none';
  171. rightBtn.style.display = 'none';
  172. console.log('恢复完成');
  173. fullStatus = false;
  174. }
  175.  
  176. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址