Video Full Screen In Tab

让所有视频网页全屏 Maximize all video players

当前为 2015-05-11 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Video Full Screen In Tab
  3. // @namespace http://www.icycat.com
  4. // @description 让所有视频网页全屏 Maximize all video players
  5. // @author 冻猫
  6. // @include *
  7. // @exclude *user.qzone.qq.com/*
  8. // @version 5.7
  9. // @grant none
  10. // @run-at document-end
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.  
  15. var fullStatus = false,
  16. isIframe = false,
  17. isRbtn = true,
  18. parentArray = new Array(),
  19. backStyle = new Object(),
  20. mouse = {
  21. leave: 'listener',
  22. over: 'listener'
  23. },
  24. browser, btnText, player, playerParent;
  25.  
  26. //flash游戏页面,不在flash上显示还原按钮
  27. var excludeRbtnRules = {
  28. 'dmm': 'www.dmm.com',
  29. '4399': 'www.4399.com',
  30. '3366': 'www.3366.com',
  31. '17173flash': 'flash.17173.com',
  32. '7k7k': 'www.7k7k.com'
  33. }
  34.  
  35. for (var i in excludeRbtnRules) {
  36. if (document.location.href.match(excludeRbtnRules[i])) {
  37. isRbtn = false;
  38. }
  39. }
  40.  
  41. if (window.top !== window.self) {
  42. isIframe = true;
  43. }
  44.  
  45. if (navigator.language.toLocaleLowerCase() == 'zh-cn') {
  46. btnText = {
  47. out: '网页全屏',
  48. inner: '内层全屏',
  49. restore: '还原大小'
  50. };
  51. } else {
  52. btnText = {
  53. out: 'Maximize',
  54. inner: 'Maximize',
  55. restore: 'Restore'
  56. };
  57. }
  58.  
  59. if (navigator.userAgent.match(/Firefox/i)) {
  60. browser = 'firefox';
  61. } else if (navigator.userAgent.match(/Chrome/i)) {
  62. browser = 'chrome';
  63. } else {
  64. browser = 'other';
  65. }
  66.  
  67. var createButton = function(id) {
  68. btn = document.createElement('tbdiv');
  69. btn.id = id;
  70. btn.onclick = function() {
  71. maximize.playerControl();
  72. };
  73. document.body.appendChild(btn);
  74. return btn;
  75. }
  76.  
  77. var setButton = {
  78. init: function() {
  79. if (tool.isFullClient(player)) {
  80. return;
  81. }
  82. this.show();
  83. },
  84. show: function() {
  85. try {
  86. player.addEventListener('mouseleave', handle.leavePlayer, false);
  87. if (!fullStatus) {
  88. document.addEventListener('scroll', handle.scrollFix, false);
  89. }
  90. } catch (e) {
  91. mouse.leave = player.onmouseleave;
  92. player.onmouseleave = function() {
  93. handle.leavePlayer();
  94. player.onmouseleave = mouse.leave;
  95. };
  96. }
  97. controlBtn.style.display = 'block';
  98. controlBtn.style.visibility = 'visible';
  99. this.locate();
  100. },
  101. locate: function() {
  102. var playerRect = tool.getRect(player);
  103. if (playerRect.pageY < 20 || fullStatus) {
  104. if (fullStatus) {
  105. playerRect.screenY = playerRect.screenY + 50;
  106. playerRect.screenX = playerRect.screenX - 30;
  107. controlBtn.innerHTML = btnText.restore;
  108. } else {
  109. playerRect.screenY = playerRect.screenY + 20;
  110. playerRect.screenX = playerRect.screenX + 64;
  111. controlBtn.classList.add('playerControlBtnCol');
  112. if (isIframe) {
  113. controlBtn.innerHTML = btnText.inner;
  114. } else {
  115. controlBtn.innerHTML = btnText.out;
  116. }
  117. }
  118. if (browser == 'firefox' && fullStatus) {
  119. controlBtn.style.opacity = '1';
  120. } else {
  121. controlBtn.style.opacity = '0.5';
  122. }
  123. } else {
  124. controlBtn.classList.remove('playerControlBtnCol');
  125. controlBtn.style.opacity = '0.5';
  126. controlBtn.innerHTML = btnText.out;
  127. }
  128. controlBtn.style.top = playerRect.screenY - 20 + 'px';
  129. controlBtn.style.left = playerRect.screenX - 64 + player.offsetWidth + 'px';
  130. }
  131. };
  132.  
  133. var tool = {
  134. getRect: function(element) {
  135. var rect = element.getBoundingClientRect();
  136. var scroll = tool.getScroll();
  137. return {
  138. pageX: rect.left + scroll.left,
  139. pageY: rect.top + scroll.top,
  140. screenX: rect.left,
  141. screenY: rect.top
  142. };
  143. },
  144. isFullClient: function(element) {
  145. var client = tool.getClient();
  146. var rect = tool.getRect(element);
  147. if (Math.abs(client.width - element.offsetWidth) < 21 && Math.abs(client.height - element.offsetHeight) < 21 & rect.screenY < 10 & rect.screenX < 20) {
  148. return true;
  149. } else {
  150. return false;
  151. }
  152. },
  153. getScroll: function() {
  154. return {
  155. left: document.documentElement.scrollLeft || document.body.scrollLeft,
  156. top: document.documentElement.scrollTop || document.body.scrollTop
  157. };
  158. },
  159. getClient: function() {
  160. return {
  161. width: document.compatMode == 'CSS1Compat' ? document.documentElement.clientWidth : document.body.clientWidth,
  162. height: document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight
  163. };
  164. },
  165. addStyle: function(css) {
  166. var style = document.createElement('style');
  167. style.type = 'text/css';
  168. var node = document.createTextNode(css);
  169. style.appendChild(node);
  170. document.head.appendChild(style);
  171. return style;
  172. }
  173. };
  174.  
  175. var handle = {
  176. getPlayer: function(e) {
  177. if (fullStatus) {
  178. return;
  179. }
  180. var target = e.target;
  181. var nodeName = target.nodeName;
  182. switch (nodeName) {
  183. case 'OBJECT':
  184. case 'EMBED':
  185. case 'IFRAME':
  186. case 'VIDEO':
  187. if (target.offsetWidth > 99 && target.offsetHeight > 99) {
  188. player = target;
  189. playerParent = /OBJECT|SPAN/.test(player.parentNode.nodeName) ? player.parentNode.parentNode : player.parentNode;
  190. setButton.init();
  191. }
  192. break;
  193. default:
  194. handle.leavePlayer();
  195. }
  196. },
  197. leavePlayer: function() {
  198. if (controlBtn.style.visibility == 'visible') {
  199. controlBtn.style.opacity = '';
  200. controlBtn.style.visibility = '';
  201. player.removeEventListener('mouseleave', handle.leavePlayer, false);
  202. document.removeEventListener('scroll', handle.scrollFix, false);
  203. }
  204. },
  205. scrollFix: function() {
  206. setButton.locate();
  207. },
  208. restoreButton: function() {
  209. switch (browser) {
  210. case 'chrome':
  211. if (window.outerWidth < window.screen.width) {
  212. setButton.show();
  213. }
  214. break;
  215. case 'firefox':
  216. if (window.innerWidth < window.screen.width) {
  217. setButton.show();
  218. }
  219. break;
  220. }
  221. }
  222. };
  223.  
  224. var maximize = {
  225. playerControl: function() {
  226. this.checkPlayer();
  227. if (!fullStatus) {
  228. this.fullWin();
  229. } else {
  230. this.smallWin();
  231. }
  232. },
  233. checkPlayer: function() {
  234. parentArray = [];
  235. var full = player;
  236. while (full = full.parentNode) {
  237. if (full.nodeName == 'BODY') {
  238. break;
  239. }
  240. if (full.getAttribute) {
  241. parentArray.push(full);
  242. }
  243. }
  244. },
  245. fullWin: function() {
  246. if (!fullStatus) {
  247. document.removeEventListener('mouseover', handle.getPlayer, false);
  248. if (isRbtn) {
  249. try {
  250. player.addEventListener('mouseover', handle.restoreButton, false);
  251. } catch (e) {
  252. mouse.over = player.onmouseover;
  253. player.onmouseover = handle.restoreButton;
  254. }
  255. }
  256. backStyle = {
  257. htmlId: document.body.parentNode.id,
  258. bodyId: document.body.id
  259. };
  260. document.body.parentNode.id = 'htmlToothbrush';
  261. document.body.id = 'bodyToothbrush';
  262. leftBtn.style.display = 'block';
  263. rightBtn.style.display = 'block';
  264. controlBtn.style.display = '';
  265. if (player.nodeName == 'VIDEO') {
  266. backStyle.controls = player.controls;
  267. player.controls = true;
  268. }
  269. for (var i = 0; i < parentArray.length; i++) {
  270. parentArray[i].classList.add('parentToothbrush');
  271. if (getComputedStyle(parentArray[i]).position == 'fixed') {
  272. parentArray[i].classList.add('absoluteToothbrush');
  273. }
  274. }
  275. if (browser == 'firefox' || player.nodeName == 'VIDEO' || player.nodeName == 'IFRAME' || getComputedStyle(player).position == 'fixed' || getComputedStyle(player).position == 'absolute') {
  276. player.classList.add('playerFixedToothbrush');
  277. } else {
  278. playerParent.classList.add('playerParentToothbrush');
  279. player.classList.add('playerRelativeToothbrush');
  280. if (player.offsetTop > 0){
  281. player.style.setProperty('top', (0-player.offsetTop)+'px', 'important');
  282. }
  283. if (player.offsetLeft > 1){
  284. player.style.setProperty('left', (1-player.offsetLeft)+'px', 'important');
  285. }
  286. }
  287. }
  288. fullStatus = true;
  289. },
  290. smallWin: function() {
  291. if (isRbtn) {
  292. player.removeEventListener('mouseover', handle.restoreButton, false);
  293. if (mouse.over != 'listener') {
  294. player.onmouseover = mouse.over;
  295. }
  296. }
  297. document.body.parentNode.id = backStyle.htmlId;
  298. document.body.id = backStyle.bodyId;
  299. for (var i = 0; i < parentArray.length; i++) {
  300. parentArray[i].classList.remove('parentToothbrush');
  301. parentArray[i].classList.remove('absoluteToothbrush');
  302. }
  303. player.classList.remove('playerFixedToothbrush');
  304. playerParent.classList.remove('playerParentToothbrush');
  305. player.classList.remove('playerRelativeToothbrush');
  306. player.style.removeProperty('top');
  307. player.style.removeProperty('left');
  308. if (player.nodeName == 'VIDEO') {
  309. player.controls = backStyle.controls;
  310. }
  311. leftBtn.style.display = '';
  312. rightBtn.style.display = '';
  313. controlBtn.style.display = '';
  314. document.addEventListener('mouseover', handle.getPlayer, false);
  315. fullStatus = false;
  316. }
  317. };
  318.  
  319. tool.addStyle([
  320. '#htmlToothbrush, #bodyToothbrush {overflow:hidden !important;}',
  321. '#htmlToothbrush #bodyToothbrush .parentToothbrush {overflow:visible !important;z-index:auto !important;}',
  322. '#htmlToothbrush #bodyToothbrush .absoluteToothbrush {position:absolute !important;}',
  323. '#htmlToothbrush #bodyToothbrush .playerParentToothbrush {position:fixed !important;top:0px !important;left:0px !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;margin:0 !important;padding:0 !important;z-index:2147483645 !important;border:none !important;background-color:#000 !important;}',
  324. '#htmlToothbrush #bodyToothbrush .playerRelativeToothbrush {position:relative !important;top:0px !important;left:1px !important;width:calc(100% - 2px) !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;margin:0 !important;padding:0 !important;z-index:2147483645 !important;border:none !important;}',
  325. '#htmlToothbrush #bodyToothbrush .playerFixedToothbrush {position:fixed !important;top:0px !important;left:1px !important;width:calc(100% - 2px) !important;height:100% !important;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;margin:0 !important;padding:0 !important;z-index:2147483645 !important;border:none !important;}',
  326. '#htmlToothbrush #bodyToothbrush object.playerFixedToothbrush, #htmlToothbrush #bodyToothbrush embed.playerFixedToothbrush, #htmlToothbrush #bodyToothbrush video.playerFixedToothbrush {background-color:#000 !important;}',
  327. '#htmlToothbrush #bodyToothbrush iframe.playerFixedToothbrush {background-color:#FFF !important;}',
  328. '#htmlToothbrush #bodyToothbrush object.playerRelativeToothbrush, #htmlToothbrush #bodyToothbrush embed.playerRelativeToothbrush {background-color:#000 !important;}',
  329. '#htmlToothbrush #bodyToothbrush object.parentToothbrush {width:100% !important;height:100% !important}',
  330. '#playerControlBtn {visibility:hidden;opacity:0;display:none;transition: all 0.5s ease;cursor: pointer;font: 12px "微软雅黑";margin:0;width:64px;height:20px;line-height:20px;border:none;text-align: center;position: fixed;z-index:2147483646;background-color: #27A9D8;color: #FFF;} #playerControlBtn:hover {visibility:visible;opacity:1;background-color:#2774D8;}',
  331. '#playerControlBtn.playerControlBtnCol {width:20px;height:64px;line-height:16px;}',
  332. '#leftFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;left:0;z-index:2147483646;background:#000;}',
  333. '#rightFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;right:0;z-index:2147483646;background:#000;}'
  334. ].join('\n'));
  335.  
  336. var controlBtn = createButton('playerControlBtn');
  337. var leftBtn = createButton('leftFullStackButton');
  338. var rightBtn = createButton('rightFullStackButton');
  339.  
  340. document.addEventListener('mouseover', handle.getPlayer, false);
  341.  
  342. })();

QingJ © 2025

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