// ==UserScript== // @name Video Full Screen In Tab // @namespace http://www.icycat.com // @description 让所有视频网页全屏 Maximize all video players // @author 冻猫 // @include * // @version 3.5 // @grant none // @run-at document-end // @downloadURL none // ==/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;position:fixed !important;margin:0px !important;padding:0px !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !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); })();