☰

Video Full Screen In Tab

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

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

  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     3.2
  8. // @grant       none
  9. // @run-at      document-end
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.  
  14. 	var fullStatus = false,
  15. 		isIframe = false,
  16. 		parentArray = new Array(),
  17. 		parentStyle = new Array(),
  18. 		mouse = {
  19. 			leave: 'listener',
  20. 			over: 'listener'
  21. 		},
  22. 		browser, btnText, player, parent, backStyle, controlBtn, leftBtn, rightBtn, observer;
  23.  
  24. 	addStyle('.videoToothbrush .parentToothbrush, .videoToothbrush .parentToothbrush object {width:100% !important;height:100% !important;}');
  25. 	addStyle('.videoToothbrush .parentToothbrush .playerToothbrush {width:calc(100% - 2px) !important;height:100% !important;}');
  26.  
  27. 	if (window.top !== window.self) {
  28. 		isIframe = true;
  29. 	}
  30.  
  31. 	if (navigator.language == 'zh-CN') {
  32. 		btnText = {
  33. 			out: '网页全屏',
  34. 			inner: '内层全屏',
  35. 			restore: '还原大小'
  36. 		};
  37. 	} else {
  38. 		btnText = {
  39. 			out: 'Maximize',
  40. 			inner: 'Maximize',
  41. 			restore: 'Restore'
  42. 		};
  43. 	}
  44.  
  45. 	if (navigator.userAgent.match(/Firefox/i)) {
  46. 		browser = 'firefox';
  47. 	} else if (navigator.userAgent.match(/Chrome/i)) {
  48. 		browser = 'chrome';
  49. 	} else {
  50. 		browser = 'other';
  51. 	}
  52.  
  53. 	createButton();
  54. 	createFullButton();
  55.  
  56. 	observer = new MutationObserver(function(mutation) {
  57. 		if (fullStatus) {
  58. 			observer.disconnect();
  59. 			resizeHandle();
  60. 			observer.observe(parent, {
  61. 				attributes: true,
  62. 				subtree: true
  63. 			});
  64. 		} else {
  65. 			if (isFull()) {
  66. 				observer.disconnect();
  67. 				controlBtn.style.display = '';
  68. 			}
  69. 		}
  70. 	});
  71.  
  72. 	document.addEventListener('mouseover', getPlayer, false);
  73.  
  74. 	function getPlayer(e) {
  75. 		if (fullStatus) {
  76. 			return;
  77. 		}
  78. 		var target = e.target;
  79. 		var nodeName = target.nodeName;
  80. 		switch (nodeName) {
  81. 			case 'OBJECT':
  82. 			case 'EMBED':
  83. 				if (target.offsetWidth > 99 && target.offsetHeight > 99) {
  84. 					player = target;
  85. 					parent = player.parentNode;
  86. 					if (parent.nodeName == 'OBJECT') {
  87. 						parent = parent.parentNode;
  88. 					}
  89. 					buttonHandle();
  90. 				}
  91. 				break;
  92. 			case 'IFRAME':
  93. 			case 'VIDEO':
  94. 				if (target.offsetWidth > 99 && target.offsetHeight > 99) {
  95. 					player = target;
  96. 					parent = player.parentNode;
  97. 					buttonHandle();
  98. 				}
  99. 				break;
  100. 		}
  101. 	}
  102.  
  103. 	function createButton() {
  104. 		addStyle('#playerControlBtn {visibility:hidden;opacity:0;transition: all 0.5s ease;display:none;cursor: pointer;font: 12px "微软雅黑";margin:0;width:64px;height:20px;line-height:20px;border:none;text-align: center;position: absolute;z-index:2147483646;background-color: #27A9D8;color: #FFF;} #playerControlBtn:hover {visibility:visible;opacity:1;background-color:#2774D8;}');
  105. 		var btn = document.createElement('tbdiv');
  106. 		btn.id = 'playerControlBtn';
  107. 		btn.onclick = function() {
  108. 			playerControl();
  109. 		};
  110. 		document.body.appendChild(btn);
  111. 		controlBtn = document.getElementById('playerControlBtn');
  112. 	}
  113.  
  114. 	function createFullButton() {
  115. 		var leftButton = document.createElement('tbdiv');
  116. 		leftButton.id = 'leftFullStackButton';
  117. 		leftButton.onclick = function() {
  118. 			playerControl();
  119. 		};
  120. 		document.body.appendChild(leftButton);
  121. 		addStyle('#leftFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;left:0;z-index:2147483646;}');
  122. 		var rightButton = document.createElement('tbdiv');
  123. 		rightButton.id = 'rightFullStackButton';
  124. 		rightButton.onclick = function() {
  125. 			playerControl();
  126. 		};
  127. 		document.body.appendChild(rightButton);
  128. 		addStyle('#rightFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;right:0;z-index:2147483646;}');
  129. 		leftBtn = document.getElementById('leftFullStackButton');
  130. 		rightBtn = document.getElementById('rightFullStackButton');
  131. 	}
  132.  
  133. 	function buttonHandle() {
  134. 		if (isFull()) {
  135. 			return;
  136. 		}
  137. 		observer.observe(parent, {
  138. 			attributes: true,
  139. 			subtree: true
  140. 		});
  141. 		buttonRect();
  142. 	}
  143.  
  144. 	function buttonRect() {
  145. 		try {
  146. 			player.addEventListener('mouseleave', hideHandle, false);
  147. 		} catch(e) {
  148. 			mouse.leave = player.onmouseleave;
  149. 			player.onmouseleave = function(){
  150. 				hideHandle();
  151. 				player.onmouseleave = mouse.leave;
  152. 			};
  153. 		}
  154. 		controlBtn.style.display = 'block';
  155. 		controlBtn.style.visibility = 'visible';
  156. 		var playerRect = getRect(player);
  157. 		if (playerRect.pageY < 20 || fullStatus) {
  158. 			if (fullStatus) {
  159. 				playerRect.pageY = playerRect.pageY + 50;
  160. 				playerRect.pageX = playerRect.pageX - 30;
  161. 				controlBtn.innerHTML = btnText.restore;
  162. 			} else {
  163. 				playerRect.pageY = playerRect.pageY + 26;
  164. 				playerRect.pageX = playerRect.pageX - 31;
  165. 				if (isIframe) {
  166. 					controlBtn.innerHTML = btnText.inner;
  167. 				} else {
  168. 					controlBtn.innerHTML = btnText.out;
  169. 				}
  170. 			}
  171. 			if (browser == 'firefox') {
  172. 				controlBtn.style.transition = 'all 0s';
  173. 				controlBtn.style.opacity = '1';
  174. 			} else {
  175. 				controlBtn.style.transition = '';
  176. 				controlBtn.style.opacity = '0.5';
  177. 			}
  178. 		} else {
  179. 			controlBtn.style.transition = '';
  180. 			controlBtn.style.opacity = '0.5';
  181. 			controlBtn.innerHTML = btnText.out;
  182. 		}
  183. 		controlBtn.style.top = playerRect.pageY - 20 + 'px';
  184. 		controlBtn.style.left = playerRect.pageX - 64 + player.offsetWidth + 'px';
  185. 	}
  186.  
  187. 	function hideHandle() {
  188. 		controlBtn.style.opacity = '';
  189. 		controlBtn.style.visibility = '';
  190. 		if (!fullStatus) {
  191. 			observer.disconnect();
  192. 		}
  193. 		player.removeEventListener('mouseleave', hideHandle, false);
  194. 	}
  195.  
  196. 	function getRect(element) {
  197. 		var rect = element.getBoundingClientRect();
  198. 		var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  199. 		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  200. 		return {
  201. 			pageX: rect.left + scrollLeft,
  202. 			pageY: rect.top + scrollTop
  203. 		};
  204. 	}
  205.  
  206. 	function isFull() {
  207. 		var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
  208. 		var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  209. 		if (Math.abs(clientWidth - player.offsetWidth) < 21 && Math.abs(clientHeight - player.offsetHeight) < 21) {
  210. 			return true;
  211. 		} else {
  212. 			return false;
  213. 		}
  214. 	}
  215.  
  216. 	function addStyle(css) {
  217. 		var style = document.createElement('style');
  218. 		style.type = 'text/css';
  219. 		var node = document.createTextNode(css);
  220. 		style.appendChild(node);
  221. 		document.head.appendChild(style);
  222. 	}
  223.  
  224. 	function playerControl() {
  225. 		checkPlayer();
  226. 		if (!fullStatus) {
  227. 			fullWin();
  228. 			observer.observe(parent, {
  229. 				attributes: true,
  230. 				subtree: true
  231. 			});
  232. 		} else {
  233. 			observer.disconnect();
  234. 			smallWin();
  235. 		}
  236. 	}
  237.  
  238. 	function checkPlayer() {
  239. 		parentArray = [];
  240. 		var full = parent;
  241. 		while (full = full.parentNode) {
  242. 			if (full.getAttribute) {
  243. 				parentArray.push(full);
  244. 			}
  245. 			if (full.nodeName == 'HTML') {
  246. 				break;
  247. 			}
  248. 		}
  249. 	}
  250.  
  251. 	function resizeHandle() {
  252. 		if (parent.style.width != '100%') {
  253. 			backStyle.parentWidth = parent.style.width;
  254. 		}
  255. 		if (parent.style.height != '100%') {
  256. 			backStyle.parentHeight = parent.style.height;
  257. 		}
  258. 		if (player.style.width != 'calc(100% - 2px)') {
  259. 			backStyle.playerWidth = player.style.width;
  260. 		}
  261. 		if (player.style.height != '100%') {
  262. 			backStyle.playerHeight = player.style.height;
  263. 		}
  264. 		if (parent.style.width != '100%' || parent.style.height != '100%' || player.style.width != 'calc(100% - 2px)' || player.style.height != '100%') {
  265. 			fullWin();
  266. 		}
  267. 	}
  268.  
  269. 	function fullWin() {
  270. 		if (!fullStatus) {
  271. 			document.removeEventListener('mouseover', getPlayer, false);
  272. 			/*if (browser == 'chrome') {
  273. 				try {
  274. 					player.addEventListener('mouseover', buttonRect, false);
  275. 				} catch(e) {
  276. 					mouse.over = player.onmouseover;
  277. 					player.onmouseover = buttonRect;
  278. 				}
  279. 			}*/
  280. 			parent.parentNode.classList.add('videoToothbrush');
  281. 			parent.classList.add('parentToothbrush')
  282. 			player.classList.add('playerToothbrush');
  283. 			window.addEventListener('resize', resizeHandle, false);
  284. 			backStyle = {
  285. 				html: document.body.parentNode.style.overflow,
  286. 				body: document.body.style.overflow,
  287. 				parent: parent.style.cssText,
  288. 				parentWidth: parent.style.width,
  289. 				parentHeight: parent.style.height,
  290. 				player: player.style.cssText,
  291. 				playerWidth: player.style.width,
  292. 				playerHeight: player.style.height
  293. 			};
  294. 			leftBtn.style.display = 'block';
  295. 			rightBtn.style.display = 'block';
  296. 			controlBtn.style.display = '';
  297. 			if (player.nodeName == 'VIDEO') {
  298. 				backStyle.controls = player.controls;
  299. 				player.controls = true;
  300. 			}
  301. 		}
  302. 		document.body.parentNode.style.overflow = 'hidden';
  303. 		document.body.style.overflow = 'hidden';
  304. 		for (var i = 0; i < parentArray.length; i++) {
  305. 			if (!fullStatus) {
  306. 				parentStyle[i] = {
  307. 					zIndex: parentArray[i].style.zIndex
  308. 				};
  309. 			}
  310. 			parentArray[i].style.setProperty('z-index', 'auto', 'important');
  311. 		}
  312. 		parent.style.cssText = 'width:100%;height:100%;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:block !important;';
  313. 		player.style.cssText = 'display:' + getComputedStyle(player).display + ' !important;visibility:' + getComputedStyle(player).visibility + ' !important;width:calc(100% - 2px);height:100%;z-index:2147483645 !important;position:relative !important;border:none !important;';
  314. 		var rect = player.getBoundingClientRect();
  315. 		player.style.left = (1 - rect.left) + 'px';
  316. 		player.style.top = (0 - rect.top) + 'px';
  317. 		fullStatus = true;
  318. 	}
  319.  
  320. 	function smallWin() {
  321. 		/*if (browser == 'chrome') {
  322. 			player.removeEventListener('mouseover', buttonRect, false);
  323. 			if (mouse.over != 'listener') {
  324. 				player.onmouseover = mouse.over;
  325. 			}
  326. 		}*/
  327. 		parent.parentNode.classList.remove('videoToothbrush');
  328. 		parent.classList.remove('parentToothbrush')
  329. 		player.classList.remove('playerToothbrush');
  330. 		window.removeEventListener('resize', resizeHandle, false);
  331. 		document.body.parentNode.style.overflow = backStyle.html;
  332. 		document.body.style.overflow = backStyle.body;
  333. 		for (var i = 0; i < parentArray.length; i++) {
  334. 			parentArray[i].style.zIndex = parentStyle[i].zIndex;
  335. 		}
  336. 		parent.style.cssText = backStyle.parent;
  337. 		parent.style.width = backStyle.parentWidth;
  338. 		parent.style.height = backStyle.parentHeight;
  339. 		player.style.cssText = backStyle.player;
  340. 		player.style.width = backStyle.playerWidth;
  341. 		player.style.height = backStyle.playerHeight;
  342. 		if (player.nodeName == 'VIDEO') {
  343. 			player.controls = backStyle.controls;
  344. 		}
  345. 		leftBtn.style.display = '';
  346. 		rightBtn.style.display = '';
  347. 		controlBtn.style.display = '';
  348. 		document.addEventListener('mouseover', getPlayer, false);
  349. 		fullStatus = false;
  350. 	}
  351.  
  352. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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