☰

Video Full Screen In Tab

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

当前为 2015-09-18 提交的版本，查看 最新版本。

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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