Greasy Fork

Greasy Fork is available in English.

Video Full Screen In Tab

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

当前为 2014-09-23 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

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

(function() {

	var fullStatus = false,
		isIframe = false,
		parentArray = new Array(),
		parentStyle = new Array(),
		browser, btnText, player, parent, backStyle, controlBtn, leftBtn, rightBtn, observer;

	addStyle('.videoToothbrush .parentToothbrush, .videoToothbrush .parentToothbrush object {width:100% !important;height:100% !important;}');
	addStyle('.videoToothbrush .parentToothbrush .playerToothbrush {width:calc(100% - 2px) !important;height:100% !important;}');

	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';
	}

	createButton();
	createFullButton();

	observer = new MutationObserver(function(mutation) {
		if (fullStatus) {
			observer.disconnect();
			resizeHandle();
			observer.observe(parent, {
				attributes: true,
				subtree: true
			});
		} else {
			if (isFull()) {
				observer.disconnect();
				controlBtn.style.display = '';
			}
		}
	});

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

	function getPlayer(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;
					}
					buttonHandle();
				}
				break;
			case 'IFRAME':
			case 'VIDEO':
				if (target.offsetWidth > 99 && target.offsetHeight > 99) {
					player = target;
					parent = player.parentNode;
					buttonHandle();
				}
				break;
		}
	}

	function createButton() {
		addStyle('#playerControlBtn {visibility:hidden;opacity:0;transition: all 0.5s ease;display:none;cursor: pointer;font: 12px "微软雅黑";padding: 2px 2px 3px 2px;margin:0;width:60px;height:16px;border:none;text-align: center;position: absolute;z-index:2147483646;background-color: #27A9D8;color: #FFF;} #playerControlBtn:hover {visibility:visible;opacity:1;background-color:#2774D8;}');
		var btn = document.createElement('tbdiv');
		btn.id = 'playerControlBtn';
		btn.onclick = function() {
			playerControl();
		};
		document.body.appendChild(btn);
		controlBtn = document.getElementById('playerControlBtn');
	}

	function createFullButton() {
		var leftButton = document.createElement('tbdiv');
		leftButton.id = 'leftFullStackButton';
		leftButton.onclick = function() {
			playerControl();
		};
		document.body.appendChild(leftButton);
		addStyle('#leftFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;left:0;z-index:2147483646;}');
		var rightButton = document.createElement('tbdiv');
		rightButton.id = 'rightFullStackButton';
		rightButton.onclick = function() {
			playerControl();
		};
		document.body.appendChild(rightButton);
		addStyle('#rightFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;right:0;z-index:2147483646;}');
		leftBtn = document.getElementById('leftFullStackButton');
		rightBtn = document.getElementById('rightFullStackButton');
	}

	function buttonHandle() {
		if (isFull()) {
			return;
		}
		observer.observe(parent, {
			attributes: true,
			subtree: true
		});
		buttonRect();
	}

	function buttonRect() {
		player.addEventListener('mouseleave', hideHandle, false);
		controlBtn.style.display = 'block';
		controlBtn.style.visibility = 'visible';
		var playerRect = getRect(player);
		if (playerRect.pageY < 21 || fullStatus) {
			if (fullStatus) {
				playerRect.pageY = playerRect.pageY + 50;
				playerRect.pageX = playerRect.pageX - 30;
				controlBtn.innerHTML = btnText.restore;
			} else {
				playerRect.pageY = playerRect.pageY + 26;
				playerRect.pageX = playerRect.pageX - 31;
				if (isIframe) {
					controlBtn.innerHTML = btnText.inner;
				} else {
					controlBtn.innerHTML = btnText.out;
				}
			}
			if (browser == 'firefox') {
				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 - 21 + 'px';
		controlBtn.style.left = playerRect.pageX - 64 + player.offsetWidth + 'px';
	}

	function hideHandle() {
		controlBtn.style.opacity = '';
		controlBtn.style.visibility = '';
		if (!fullStatus) {
			observer.disconnect();
		}
		player.removeEventListener('mouseleave', hideHandle, false);
	}

	function getRect(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
		};
	}

	function isFull() {
		var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
		var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
		if (Math.abs(clientWidth - player.offsetWidth) < 21 && Math.abs(clientHeight - player.offsetHeight) < 21) {
			return true;
		} else {
			return false;
		}
	}

	function addStyle(css) {
		var style = document.createElement('style');
		style.type = 'text/css';
		var node = document.createTextNode(css);
		style.appendChild(node);
		document.head.appendChild(style);
	}

	function playerControl() {
		checkPlayer();
		if (!fullStatus) {
			fullWin();
			observer.observe(parent, {
				attributes: true,
				subtree: true
			});
		} else {
			observer.disconnect();
			smallWin();
		}
	}

	function checkPlayer() {
		parentArray = [];
		var full = parent;
		while (full = full.parentNode) {
			if (full.getAttribute) {
				parentArray.push(full);
			}
			if (full.nodeName == 'HTML') {
				break;
			}
		}
	}

	function resizeHandle() {
		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%') {
			fullWin();
		}
	}

	function fullWin() {
		if (!fullStatus) {
			document.removeEventListener('mouseover', getPlayer, false);
			if (browser == 'chrome') {
				//player.addEventListener('mouseover', buttonRect, false);
			}
			parent.parentNode.classList.add('videoToothbrush');
			parent.classList.add('parentToothbrush')
			player.classList.add('playerToothbrush');
			window.addEventListener('resize', resizeHandle, false);
			backStyle = {
				html: document.body.parentNode.style.overflow,
				body: document.body.style.overflow,
				parent: parent.style.cssText,
				parentWidth: parent.style.width,
				parentHeight: parent.style.height,
				player: player.style.cssText,
				playerWidth: player.style.width,
				playerHeight: player.style.height
			};
			leftBtn.style.display = 'block';
			rightBtn.style.display = 'block';
			controlBtn.style.display = '';
			if (player.nodeName == 'VIDEO') {
				backStyle.controls = player.controls;
				player.controls = true;
			}
		}
		document.body.parentNode.style.overflow = 'hidden';
		document.body.style.overflow = 'hidden';
		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%;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;';
		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;';
		var rect = player.getBoundingClientRect();
		player.style.left = (1 - rect.left) + 'px';
		player.style.top = (0 - rect.top) + 'px';
		fullStatus = true;
	}

	function smallWin() {
		if (browser == 'chrome') {
			//player.removeEventListener('mouseover', buttonRect, false);
		}
		parent.parentNode.classList.remove('videoToothbrush');
		parent.classList.remove('parentToothbrush')
		player.classList.remove('playerToothbrush');
		window.removeEventListener('resize', resizeHandle, false);
		document.body.parentNode.style.overflow = backStyle.html;
		document.body.style.overflow = backStyle.body;
		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', getPlayer, false);
		fullStatus = false;
	}

})();