// ==UserScript== // @name Video Full Screen In Tab // @namespace http://www.icycat.com // @description 让所有视频网页全屏 // @author 冻猫 // @include * // @version 1.9 // @grant none // @run-at document-end // @downloadURL none // ==/UserScript== (function() { var btnDelay = null, isOver = false, fullStatus = false, parentArray = new Array(), parentStyle = new Array(), player, parent, backStyle, controlBtn, leftBtn, rightBtn, observer; createButton(); createFullButton(); 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.type == 'application/x-shockwave-flash' && target.offsetWidth > 299 && target.offsetHeight > 199) { player = target; showButton(); } break; case 'IFRAME': case 'VIDEO': if (target.offsetWidth > 299 && target.offsetHeight > 199) { player = target; showButton(); } break; default: if (isOver) return; if (controlBtn.style.display == 'inline') { if (btnDelay) clearTimeout(btnDelay); btnDelay = setTimeout(function() { controlBtn.style.display = 'none'; }, 200); } return; } } function createButton() { addStyle('#playerControlBtn {display:none;cursor: pointer;font: 12px "微软雅黑";padding: 2px 2px 3px 2px;margin:0;width:60px;height:16px;text-align: center;transition: all 0.3s ease-out;position: absolute;z-index:2147483646;background-color: #27A9D8;color: #FFF;} #playerControlBtn:hover{background-color: #00539B;}'); var btn = document.createElement('div'); btn.id = 'playerControlBtn'; btn.onclick = function() { playerControl(); }; btn.onmouseover = function() { isOver = true; if (btnDelay) clearTimeout(btnDelay); }; btn.onmouseout = function() { isOver = false; if (btnDelay) clearTimeout(btnDelay); btnDelay = setTimeout(function() { controlBtn.style.display = 'none'; }, 200); } btn.appendChild(document.createTextNode('网页全屏')); document.body.appendChild(btn); controlBtn = document.getElementById('playerControlBtn'); } function createFullButton() { var leftButton = document.createElement('div'); 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('div'); 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 showButton() { if (btnDelay) clearTimeout(btnDelay); var rect = player.getBoundingClientRect(); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var top = rect.top + scrollTop; var left = rect.left + scrollLeft; controlBtn.style.display = 'inline'; controlBtn.style.top = (top - 21) + 'px'; controlBtn.style.left = (left + player.offsetWidth - 64) + 'px'; } 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(); if (!observer) { observer = new MutationObserver(function(mutation) { observer.disconnect(); if (parent.style.width != '100%') { backStyle.parentWidth = parent.style.width; } if (parent.style.height != '100%') { backStyle.parentHeight = parent.style.height; } resizeHandle(); observer.observe(parent, {'attributes': true}); }); } observer.observe(parent, {'attributes': true}); } else { observer.disconnect(); smallWin(); } } function checkPlayer() { parentArray = []; parent = null; var full = player; while (full = full.parentNode) { if (full.getAttribute && full.nodeName != 'OBJECT') { if (!parent) { parent = full; } else { parentArray.push(full); } } if (full.nodeName == 'HTML') break; } } function resizeHandle() { if (parent.style.width != '100%' || parent.style.height != '100%') { fullWin(); } } function fullWin() { if (!fullStatus) { document.removeEventListener('mouseover', getPlayer, false); window.addEventListener('resize', resizeHandle, false); backStyle = { html: document.body.parentNode.style.overflow, body: document.body.overflow, parent: parent.style.cssText, parentWidth: parent.style.width, parentHeight: parent.style.height, player: player.style.cssText }; leftBtn.style.display = 'inline'; rightBtn.style.display = 'inline'; } document.body.parentNode.style.overflow = 'hidden'; document.body.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:inline !important;'; player.style.cssText = 'width:calc(100% - 2px) !important;height:100% !important;z-index:2147483645 !important;position:relative !important;visibility:visible !important;display:inline !important;'; var rect = player.getBoundingClientRect(); player.style.left = (1 - rect.left) + 'px'; player.style.top = (0 - rect.top) + 'px'; controlBtn.style.display = 'none'; fullStatus = true; } function smallWin() { window.removeEventListener('resize', resizeHandle, false); document.body.parentNode.style.overflow = backStyle.html; document.body.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; leftBtn.style.display = 'none'; rightBtn.style.display = 'none'; document.addEventListener('mouseover', getPlayer, false); fullStatus = false; } })();