☰

Video Full Screen In Tab

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

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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