☰

Video Full Screen In Tab

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

当前为 2016-07-07 提交的版本，查看 最新版本。

  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. // @version     7.1
  8. // @grant       none
  9. // @run-at      document-end
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.  
  14. 	var fullStatus = false,
  15. 		isIframe = false,
  16. 		isFullIframePlayer = 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. 	var iframeRules = /player|youtube|video/i;
  27. 	var iframeUrlRules = [
  28. 		'www.watchseries.ac',
  29. 		'www.panda.tv'
  30. 	];
  31.  
  32. 	//flash游戏页面，不在flash上显示还原按钮
  33. 	var excludeRbtnRules = [
  34. 		'www.dmm.com',
  35. 		'www.dmm.co.jp',
  36. 		'www.4399.com',
  37. 		'www.3366.com',
  38. 		'flash.17173.com',
  39. 		'www.7k7k.com'
  40. 	];
  41.  
  42. 	if (excludeRbtnRules.indexOf(document.location.host) != -1) {
  43. 		isRbtn = false;
  44. 	}
  45.  
  46. 	if (window.top !== window.self) {
  47. 		isIframe = true;
  48. 	}
  49.  
  50. 	if (navigator.language.toLocaleLowerCase() == 'zh-cn') {
  51. 		btnText = {
  52. 			out: '网页全屏',
  53. 			inner: '内层全屏',
  54. 			restore: '还原大小'
  55. 		};
  56. 	} else {
  57. 		btnText = {
  58. 			out: 'Maximize',
  59. 			inner: 'Maximize',
  60. 			restore: 'Restore'
  61. 		};
  62. 	}
  63.  
  64. 	if (/Firefox/i.test(navigator.userAgent)) {
  65. 		browser = 'firefox';
  66. 	} else if (/Chrome/i.test(navigator.userAgent)) {
  67. 		browser = 'chrome';
  68. 	} else {
  69. 		browser = 'other';
  70. 	}
  71.  
  72. 	var createButton = function(id) {
  73. 		btn = document.createElement('tbdiv');
  74. 		btn.id = id;
  75. 		btn.onclick = function() {
  76. 			maximize.playerControl();
  77. 		};
  78. 		document.body.appendChild(btn);
  79. 		return btn;
  80. 	}
  81.  
  82. 	var setButton = {
  83. 		init: function() {
  84. 			if (tool.isFullClient(player)) {
  85. 				if (isIframe && !isFullIframePlayer) {
  86. 					if (player.nodeName == 'OBJECT' || player.nodeName == 'EMBED') {
  87. 						maximize.checkParent();
  88. 						maximize.addClass();
  89. 						tool.addStyle([
  90. 							'#htmlToothbrush .playerParentToothbrush .playerRelativeToothbrush, #htmlToothbrush #bodyToothbrush .playerParentToothbrush .playerRelativeToothbrush {left:0px !important;width:100% !important;}',
  91. 							'#htmlToothbrush .playerParentToothbrush .playerFixedToothbrush, #htmlToothbrush #bodyToothbrush .playerParentToothbrush .playerFixedToothbrush {left:0px !important;width:100% !important;}'
  92. 						].join('\n'));
  93. 						isFullIframePlayer = true;
  94. 					}
  95. 				}
  96. 				return;
  97. 			}
  98. 			if (isIframe && player.nodeName == 'VIDEO' && tool.isHtml5FullClient(player)) {
  99. 				return;
  100. 			}
  101. 			this.show();
  102. 		},
  103. 		show: function() {
  104. 			try {
  105. 				player.addEventListener('mouseleave', handle.leavePlayer, false);
  106. 				if (!fullStatus) {
  107. 					document.addEventListener('scroll', handle.scrollFix, false);
  108. 				}
  109. 			} catch (e) {
  110. 				mouse.leave = player.onmouseleave;
  111. 				player.onmouseleave = function() {
  112. 					handle.leavePlayer();
  113. 					player.onmouseleave = mouse.leave;
  114. 				};
  115. 			}
  116. 			controlBtn.style.display = 'block';
  117. 			controlBtn.style.visibility = 'visible';
  118. 			this.locate();
  119. 		},
  120. 		locate: function() {
  121. 			var playerRect = tool.getRect(player);
  122. 			if (playerRect.pageY < 20 || fullStatus) {
  123. 				if (fullStatus) {
  124. 					playerRect.screenY = playerRect.screenY + 50;
  125. 					playerRect.screenX = playerRect.screenX - 30;
  126. 					controlBtn.innerHTML = btnText.restore;
  127. 				} else {
  128. 					playerRect.screenY = playerRect.screenY + 20;
  129. 					if (Math.abs(tool.getClient().width - player.offsetWidth) < 21 && Math.abs(tool.getClient().height - player.offsetHeight) > 21) {
  130. 						playerRect.screenX = playerRect.screenX + 44;
  131. 					} else {
  132. 						playerRect.screenX = playerRect.screenX + 64;
  133. 					}
  134. 					controlBtn.classList.add('playerControlBtnCol');
  135. 					if (isIframe) {
  136. 						controlBtn.innerHTML = btnText.inner;
  137. 					} else {
  138. 						controlBtn.innerHTML = btnText.out;
  139. 					}
  140. 				}
  141. 				if (browser == 'firefox' && fullStatus) {
  142. 					controlBtn.style.opacity = '1';
  143. 				} else {
  144. 					controlBtn.style.opacity = '0.5';
  145. 				}
  146. 			} else {
  147. 				controlBtn.classList.remove('playerControlBtnCol');
  148. 				controlBtn.style.opacity = '0.5';
  149. 				controlBtn.innerHTML = btnText.out;
  150. 			}
  151. 			controlBtn.style.top = playerRect.screenY - 20 + 'px';
  152. 			controlBtn.style.left = playerRect.screenX - 64 + player.offsetWidth + 'px';
  153. 		}
  154. 	};
  155.  
  156. 	var tool = {
  157. 		getRect: function(element) {
  158. 			var rect = element.getBoundingClientRect();
  159. 			var scroll = tool.getScroll();
  160. 			return {
  161. 				pageX: rect.left + scroll.left,
  162. 				pageY: rect.top + scroll.top,
  163. 				screenX: rect.left,
  164. 				screenY: rect.top
  165. 			};
  166. 		},
  167. 		isFullClient: function(element) {
  168. 			var client = tool.getClient();
  169. 			var rect = tool.getRect(element);
  170. 			if (Math.abs(client.width - element.offsetWidth) < 21 && Math.abs(client.height - element.offsetHeight) < 21 && rect.screenY < 10 && rect.screenX < 20) {
  171. 				return true;
  172. 			} else {
  173. 				return false;
  174. 			}
  175. 		},
  176. 		isHtml5FullClient: function(element) {
  177. 			var client = tool.getClient();
  178. 			var rect = tool.getRect(element);
  179. 			if ((Math.abs(client.width - element.offsetWidth) < 21 && rect.screenX < 20) || (Math.abs(client.height - element.offsetHeight) < 21 && rect.screenY < 10)) {
  180. 				return true;
  181. 			} else {
  182. 				return false;
  183. 			}
  184. 		},
  185. 		getScroll: function() {
  186. 			return {
  187. 				left: document.documentElement.scrollLeft || document.body.scrollLeft,
  188. 				top: document.documentElement.scrollTop || document.body.scrollTop
  189. 			};
  190. 		},
  191. 		getClient: function() {
  192. 			return {
  193. 				width: document.compatMode == 'CSS1Compat' ? document.documentElement.clientWidth : document.body.clientWidth,
  194. 				height: document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight
  195. 			};
  196. 		},
  197. 		addStyle: function(css) {
  198. 			var style = document.createElement('style');
  199. 			style.type = 'text/css';
  200. 			var node = document.createTextNode(css);
  201. 			style.appendChild(node);
  202. 			document.head.appendChild(style);
  203. 			return style;
  204. 		}
  205. 	};
  206.  
  207. 	var handle = {
  208. 		getPlayer: function(e) {
  209. 			if (fullStatus) {
  210. 				return;
  211. 			}
  212. 			var target = e.target;
  213. 			var nodeName = target.nodeName;
  214. 			switch (nodeName) {
  215. 				case 'IFRAME':
  216. 					if (!iframeRules.test(target.className) && !iframeRules.test(target.src) && !iframeRules.test(target.id) && iframeUrlRules.indexOf(document.location.host) == -1) {
  217. 						handle.leavePlayer();
  218. 						break;
  219. 					}
  220. 				case 'OBJECT':
  221. 				case 'EMBED':
  222. 				case 'VIDEO':
  223. 					if (target.offsetWidth > 99 && target.offsetHeight > 99) {
  224. 						player = target;
  225. 						playerParent = /OBJECT|SPAN/.test(player.parentNode.nodeName) ? player.parentNode.parentNode : player.parentNode;
  226. 						setButton.init();
  227. 					}
  228. 					break;
  229. 				default:
  230. 					handle.leavePlayer();
  231. 			}
  232. 		},
  233. 		leavePlayer: function() {
  234. 			if (controlBtn.style.visibility == 'visible') {
  235. 				controlBtn.style.opacity = '';
  236. 				controlBtn.style.visibility = '';
  237. 				player.removeEventListener('mouseleave', handle.leavePlayer, false);
  238. 				document.removeEventListener('scroll', handle.scrollFix, false);
  239. 			}
  240. 		},
  241. 		scrollFix: function() {
  242. 			setButton.locate();
  243. 		},
  244. 		hotKey: function(e) {
  245. 			//默认快捷键为ESC, 全屏/恢复。altkey是按键ALT,keyCode=49是按键1，需要修改为其他快捷键的请搜索"keycode"，修改为按键对应的数字。
  246. 			if (e.keyCode == 27) {
  247. 				maximize.playerControl();
  248. 			}
  249. 		},
  250. 		restoreButton: function() {
  251. 			switch (browser) {
  252. 				case 'chrome':
  253. 					if (window.outerWidth < window.screen.width) {
  254. 						setButton.show();
  255. 					}
  256. 					break;
  257. 				case 'firefox':
  258. 					if (window.innerWidth < window.screen.width) {
  259. 						setButton.show();
  260. 					}
  261. 					break;
  262. 			}
  263. 		}
  264. 	};
  265.  
  266. 	var maximize = {
  267. 		playerControl: function() {
  268. 			this.checkParent();
  269. 			if (!fullStatus) {
  270. 				this.fullWin();
  271. 			} else {
  272. 				this.smallWin();
  273. 			}
  274. 		},
  275. 		checkParent: function() {
  276. 			parentArray = [];
  277. 			var full = player;
  278. 			while (full = full.parentNode) {
  279. 				if (full.nodeName == 'BODY') {
  280. 					break;
  281. 				}
  282. 				if (full.getAttribute) {
  283. 					parentArray.push(full);
  284. 				}
  285. 			}
  286. 		},
  287. 		fullWin: function() {
  288. 			if (!fullStatus) {
  289. 				document.removeEventListener('mouseover', handle.getPlayer, false);
  290. 				window.addEventListener('keydown', handle.hotKey, false);
  291. 				if (isRbtn) {
  292. 					try {
  293. 						player.addEventListener('mouseover', handle.restoreButton, false);
  294. 					} catch (e) {
  295. 						mouse.over = player.onmouseover;
  296. 						player.onmouseover = handle.restoreButton;
  297. 					}
  298. 				}
  299. 				backStyle = {
  300. 					htmlId: document.body.parentNode.id,
  301. 					bodyId: document.body.id
  302. 				};
  303. 				leftBtn.style.display = 'block';
  304. 				rightBtn.style.display = 'block';
  305. 				controlBtn.style.display = '';
  306. 				this.addClass();
  307. 			}
  308. 			fullStatus = true;
  309. 		},
  310. 		addClass: function() {
  311. 			document.body.parentNode.id = 'htmlToothbrush';
  312. 			document.body.id = 'bodyToothbrush';
  313. 			if (playerParent.nodeName == 'BODY') {
  314. 				document.body.parentNode.classList.add('bodyParent');
  315. 				document.body.classList.add('bodyParent');
  316. 			}
  317. 			for (var i = 0; i < parentArray.length; i++) {
  318. 				parentArray[i].classList.add('parentToothbrush');
  319. 				if (getComputedStyle(parentArray[i]).position == 'fixed') {
  320. 					parentArray[i].classList.add('absoluteToothbrush');
  321. 				}
  322. 			}
  323. 			if (browser == 'firefox' || player.nodeName == 'VIDEO' || player.nodeName == 'IFRAME' || getComputedStyle(player).position == 'fixed' || getComputedStyle(player).position == 'absolute') {
  324. 				playerParent.classList.add('playerParentToothbrush');
  325. 				player.classList.add('playerFixedToothbrush');
  326. 				if (document.location.host != 'www.youtube.com' && player.nodeName == 'VIDEO') {
  327. 					backStyle.controls = player.controls;
  328. 					player.controls = true;
  329. 				}
  330. 			} else {
  331. 				playerParent.classList.add('playerParentToothbrush');
  332. 				player.classList.add('playerRelativeToothbrush');
  333. 				if (player.offsetTop > 0) {
  334. 					backStyle.topStyle = tool.addStyle('#htmlToothbrush #bodyToothbrush .playerParentToothbrush .playerRelativeToothbrush{top:' + (0 - player.offsetTop) + 'px !important}');
  335. 				}
  336. 				if (player.offsetLeft > 1) {
  337. 					backStyle.leftStyle = tool.addStyle('#htmlToothbrush #bodyToothbrush .playerParentToothbrush .playerRelativeToothbrush{left:' + (1 - player.offsetLeft) + 'px !important}');
  338. 				}
  339. 			}
  340. 		},
  341. 		smallWin: function() {
  342. 			if (isRbtn) {
  343. 				player.removeEventListener('mouseover', handle.restoreButton, false);
  344. 				if (mouse.over != 'listener') {
  345. 					player.onmouseover = mouse.over;
  346. 				}
  347. 			}
  348. 			document.body.parentNode.id = backStyle.htmlId;
  349. 			document.body.id = backStyle.bodyId;
  350. 			if (playerParent.nodeName == 'BODY') {
  351. 				document.body.parentNode.classList.remove('bodyParent');
  352. 				document.body.classList.remove('bodyParent');
  353. 			}
  354. 			for (var i = 0; i < parentArray.length; i++) {
  355. 				parentArray[i].classList.remove('parentToothbrush');
  356. 				parentArray[i].classList.remove('absoluteToothbrush');
  357. 			}
  358. 			player.classList.remove('playerFixedToothbrush');
  359. 			playerParent.classList.remove('playerParentToothbrush');
  360. 			player.classList.remove('playerRelativeToothbrush');
  361. 			if (backStyle.topStyle) {
  362. 				backStyle.topStyle.parentNode.removeChild(backStyle.topStyle);
  363. 			}
  364. 			if (backStyle.leftStyle) {
  365. 				backStyle.leftStyle.parentNode.removeChild(backStyle.leftStyle);
  366. 			}
  367. 			if (player.nodeName == 'VIDEO') {
  368. 				player.controls = backStyle.controls;
  369. 			}
  370. 			leftBtn.style.display = '';
  371. 			rightBtn.style.display = '';
  372. 			controlBtn.style.display = '';
  373. 			window.removeEventListener('keydown', handle.hotKey, false);
  374. 			document.addEventListener('mouseover', handle.getPlayer, false);
  375. 			window.dispatchEvent(new Event('resize'));
  376. 			fullStatus = false;
  377. 		}
  378. 	};
  379.  
  380. 	tool.addStyle([
  381. 		'#htmlToothbrush, #bodyToothbrush {overflow:hidden !important;} .bodyParent {width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;}',
  382. 		'#htmlToothbrush #bodyToothbrush .parentToothbrush {overflow:visible !important;z-index:auto !important;transform:none !important;transition:none !important;}',
  383. 		'#htmlToothbrush #bodyToothbrush .absoluteToothbrush {position:absolute !important;}',
  384. 		'#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;}',
  385. 		'#htmlToothbrush .playerParentToothbrush .playerRelativeToothbrush, #htmlToothbrush #bodyToothbrush .playerParentToothbrush .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;}',
  386. 		'#htmlToothbrush .playerParentToothbrush .playerFixedToothbrush, #htmlToothbrush #bodyToothbrush .playerParentToothbrush .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;}',
  387. 		'#htmlToothbrush #bodyToothbrush iframe.playerFixedToothbrush {background-color:#FFF !important;}',
  388. 		'#htmlToothbrush #bodyToothbrush .ytp-chrome-bottom {left:0px !important;right:0px !important;margin:auto !important;position:fixed !important;z-index:2147483647 !important;}',
  389. 		'#htmlToothbrush #bodyToothbrush .ytp-settings-menu {left:70% !important;bottom:50px !important;position:fixed !important;z-index:2147483647 !important;}',
  390. 		'#htmlToothbrush #bodyToothbrush .caption-window {left:0px !important;right:0px !important;margin:auto !important;bottom:50px !important;position:fixed !important;z-index:2147483647 !important;}',
  391. 		'#htmlToothbrush #bodyToothbrush .ytp-gradient-bottom {left:0px !important;right:0px !important;margin:auto !important;position:fixed !important;z-index:2147483646 !important;}',
  392. 		'#htmlToothbrush .playerParentToothbrush object, #htmlToothbrush .playerParentToothbrush embed, #htmlToothbrush #bodyToothbrush .playerParentToothbrush object, #htmlToothbrush #bodyToothbrush .playerParentToothbrush embed {width:100% !important;height:100% !important}',
  393. 		'#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;}',
  394. 		'#playerControlBtn.playerControlBtnCol {width:20px;height:64px;line-height:16px;}',
  395. 		'#leftFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;left:0;z-index:2147483646;background:#000;}',
  396. 		'#rightFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;right:0;z-index:2147483646;background:#000;}'
  397. 	].join('\n'));
  398.  
  399. 	var controlBtn = createButton('playerControlBtn');
  400. 	var leftBtn = createButton('leftFullStackButton');
  401. 	var rightBtn = createButton('rightFullStackButton');
  402.  
  403. 	document.addEventListener('mouseover', handle.getPlayer, false);
  404.  
  405. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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