Video Full Screen In Tab

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

目前為 2014-09-30 提交的版本,檢視 最新版本

// ==UserScript==
// @name        Video Full Screen In Tab
// @namespace   http://www.icycat.com
// @description 让所有视频网页全屏 Maximize all video players
// @author      冻猫
// @include     *
// @version     3.6
// @grant       none
// @run-at      document-end
// ==/UserScript==

(function() {

	var fullStatus = false,
		isIframe = false,
		parentArray = new Array(),
		parentStyle = new Array(),
		backStyle = new Object(),
		mouse = {
			leave: 'listener',
			over: 'listener'
		},
		browser, btnText, player, parent, observer;

	if (window.top !== window.self) {
		isIframe = true;
	}

	if (navigator.language == 'zh-CN') {
		btnText = {
			out: '网页全屏',
			inner: '内层全屏',
			restore: '还原大小'
		};
	} else {
		btnText = {
			out: 'Maximize',
			inner: 'Maximize',
			restore: 'Restore'
		};
	}

	if (navigator.userAgent.match(/Firefox/i)) {
		browser = 'firefox';
	} else if (navigator.userAgent.match(/Chrome/i)) {
		browser = 'chrome';
	} else {
		browser = 'other';
	}

	observer = new MutationObserver(function(mutation) {
		if (fullStatus) {
			observer.disconnect();
			handle.resize();
			observer.observe(parent, {
				attributes: true,
				subtree: true
			});
		} else {
			if (tool.isFullClient(player)) {
				observer.disconnect();
				controlBtn.style.display = '';
			}
		}
	});

	var createButton = function(id) {
		btn = document.createElement('tbdiv');
		btn.id = id;
		btn.onclick = function() {
			maximize.playerControl();
		};
		document.body.appendChild(btn);
		return btn;
	}

	var setButton = {
		init: function() {
			if (tool.isFullClient(player)) {
				return;
			}
			observer.observe(parent, {
				attributes: true,
				subtree: true
			});
			this.show();
		},
		show: function() {
			try {
				player.addEventListener('mouseleave', handle.hideButton, false);
			} catch (e) {
				mouse.leave = player.onmouseleave;
				player.onmouseleave = function() {
					handle.hideButton();
					player.onmouseleave = mouse.leave;
				};
			}
			controlBtn.style.display = 'block';
			controlBtn.style.visibility = 'visible';
			var playerRect = tool.getRect(player);
			if (playerRect.pageY < 20 || fullStatus) {
				if (fullStatus) {
					playerRect.pageY = playerRect.pageY + 50;
					playerRect.pageX = playerRect.pageX - 30;
					controlBtn.innerHTML = btnText.restore;
				} else {
					playerRect.pageY = playerRect.pageY + 20;
					playerRect.pageX = playerRect.pageX + 64;
					if (isIframe) {
						controlBtn.innerHTML = btnText.inner;
					} else {
						controlBtn.innerHTML = btnText.out;
					}
				}
				if (browser == 'firefox' && fullStatus) {
					controlBtn.style.transition = 'all 0s';
					controlBtn.style.opacity = '1';
				} else {
					controlBtn.style.transition = '';
					controlBtn.style.opacity = '0.5';
				}
			} else {
				controlBtn.style.transition = '';
				controlBtn.style.opacity = '0.5';
				controlBtn.innerHTML = btnText.out;
			}
			controlBtn.style.top = playerRect.pageY - 20 + 'px';
			controlBtn.style.left = playerRect.pageX - 64 + player.offsetWidth + 'px';
		}
	};

	var tool = {
		getRect: function(element) {
			var rect = element.getBoundingClientRect();
			var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			return {
				pageX: rect.left + scrollLeft,
				pageY: rect.top + scrollTop,
				screenX: rect.left,
				screenY: rect.top
			};
		},
		isFullClient: function(element) {
			var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
			var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
			var top = tool.getRect(element).screenY;
			var left = tool.getRect(element).screenX;
			if (Math.abs(clientWidth - element.offsetWidth) < 21 && Math.abs(clientHeight - element.offsetHeight) < 21 & top < 10 & left < 20) {
				return true;
			} else {
				return false;
			}
		},
		addStyle: function(css) {
			var style = document.createElement('style');
			style.type = 'text/css';
			var node = document.createTextNode(css);
			style.appendChild(node);
			document.head.appendChild(style);
			return style;
		}
	};

	var handle = {
		getPlayer: function(e) {
			if (fullStatus) {
				return;
			}
			var target = e.target;
			var nodeName = target.nodeName;
			switch (nodeName) {
				case 'OBJECT':
				case 'EMBED':
					if (target.offsetWidth > 99 && target.offsetHeight > 99) {
						player = target;
						parent = player.parentNode;
						if (parent.nodeName == 'OBJECT') {
							parent = parent.parentNode;
						}
						setButton.init();
					}
					break;
				case 'IFRAME':
				case 'VIDEO':
					if (target.offsetWidth > 99 && target.offsetHeight > 99) {
						player = target;
						parent = player.parentNode;
						setButton.init();
					}
					break;
				default:
					handle.hideButton();
			}
		},
		hideButton: function() {
			if (controlBtn.style.visibility == 'visible') {
				controlBtn.style.opacity = '';
				controlBtn.style.visibility = '';
				if (!fullStatus) {
					observer.disconnect();
				}
				player.removeEventListener('mouseleave', handle.hideButton, false);
			}
		},
		resize: function() {
			if (parent.style.width != '100%') {
				backStyle.parentWidth = parent.style.width;
			}
			if (parent.style.height != '100%') {
				backStyle.parentHeight = parent.style.height;
			}
			if (player.style.width != 'calc(100% - 2px)') {
				backStyle.playerWidth = player.style.width;
			}
			if (player.style.height != '100%') {
				backStyle.playerHeight = player.style.height;
			}
			if (parent.style.width != '100%' || parent.style.height != '100%' || player.style.width != 'calc(100% - 2px)' || player.style.height != '100%') {
				maximize.fullWin();
			}
		}
	};

	var maximize = {
		playerControl: function() {
			this.checkPlayer();
			if (!fullStatus) {
				this.fullWin();
				observer.observe(parent, {
					attributes: true,
					subtree: true
				});
			} else {
				observer.disconnect();
				this.smallWin();
			}
		},
		checkPlayer: function() {
			parentArray = [];
			var full = parent;
			while (full = full.parentNode) {
				if (full.nodeName == 'BODY') {
					break;
				}
				if (full.getAttribute) {
					parentArray.push(full);
				}
			}
		},
		fullWin: function() {
			if (!fullStatus) {
				document.removeEventListener('mouseover', handle.getPlayer, false);
				/*if (browser == 'chrome') {
					try {
						player.addEventListener('mouseover', setButton.show, false);
					} catch (e) {
						mouse.over = player.onmouseover;
						player.onmouseover = setButton.show;
					}
				}*/
				window.addEventListener('resize', handle.resize, false);
				backStyle = {
					bodyId: document.body.id,
					parent: parent.style.cssText,
					parentWidth: parent.style.width,
					parentHeight: parent.style.height,
					player: player.style.cssText,
					playerWidth: player.style.width,
					playerHeight: player.style.height
				};
				document.body.id = 'Toothbrush';
				parent.classList.add('parentToothbrush')
				player.classList.add('playerToothbrush');
				backStyle.overflow = tool.addStyle('html,body{overflow:hidden !important;min-width:100% !important;}');
				leftBtn.style.display = 'block';
				rightBtn.style.display = 'block';
				controlBtn.style.display = '';
				if (player.nodeName == 'VIDEO') {
					backStyle.controls = player.controls;
					player.controls = true;
				}
			}
			for (var i = 0; i < parentArray.length; i++) {
				if (!fullStatus) {
					parentStyle[i] = {
						zIndex: parentArray[i].style.zIndex
					};
				}
				parentArray[i].style.setProperty('z-index', 'auto', 'important');
			}
			parent.style.cssText = 'width:100%;height:100%;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;margin:0px !important;padding:0px !important;top:0px !important;left:0px !important;z-index:2147483645 !important;overflow:hidden !important;position:fixed !important;background-color:#000 !important;border:none !important;display:block !important;';
			player.style.cssText = 'display:' + getComputedStyle(player).display + ' !important;visibility:' + getComputedStyle(player).visibility + ' !important;width:calc(100% - 2px);height:100%;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;z-index:2147483645 !important;position:relative !important;border:none !important;background-color:#000 !important;';
			var rect = player.getBoundingClientRect();
			player.style.left = (1 - rect.left) + 'px';
			player.style.top = (0 - rect.top) + 'px';
			fullStatus = true;
		},
		smallWin: function() {
			window.removeEventListener('resize', handle.resize, false);
			/*if (browser == 'chrome') {
				player.removeEventListener('mouseover', setButton.show, false);
				if (mouse.over != 'listener') {
					player.onmouseover = mouse.over;
				}
			}*/
			parent.classList.remove('parentToothbrush')
			player.classList.remove('playerToothbrush');
			backStyle.overflow.parentNode.removeChild(backStyle.overflow);
			document.body.id = backStyle.bodyId;
			for (var i = 0; i < parentArray.length; i++) {
				parentArray[i].style.zIndex = parentStyle[i].zIndex;
			}
			parent.style.cssText = backStyle.parent;
			parent.style.width = backStyle.parentWidth;
			parent.style.height = backStyle.parentHeight;
			player.style.cssText = backStyle.player;
			player.style.width = backStyle.playerWidth;
			player.style.height = backStyle.playerHeight;
			if (player.nodeName == 'VIDEO') {
				player.controls = backStyle.controls;
			}
			leftBtn.style.display = '';
			rightBtn.style.display = '';
			controlBtn.style.display = '';
			document.addEventListener('mouseover', handle.getPlayer, false);
			fullStatus = false;
		}
	};

	tool.addStyle([
		'#Toothbrush .parentToothbrush, #Toothbrush .parentToothbrush object {width:100% !important;height:100% !important;}',
		'#Toothbrush .parentToothbrush .playerToothbrush {width:calc(100% - 2px) !important;height:100% !important;}',
		'#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;}',
		'#leftFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;left:0;z-index:2147483646;background:#000;}',
		'#rightFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;right:0;z-index:2147483646;background:#000;}'
	].join('\n'));

	var controlBtn = createButton('playerControlBtn');
	var leftBtn = createButton('leftFullStackButton');
	var rightBtn = createButton('rightFullStackButton');

	document.addEventListener('mouseover', handle.getPlayer, false);

})();

QingJ © 2025

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