☰

Resize Video To Window Size

Resize the video player for various sites to the window size.

当前为 2016-08-04 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            Resize Video To Window Size
  3. // @description     Resize the video player for various sites to the window size.
  4. // @author          Chris H (Zren / Shade)
  5. // @namespace       http://xshade.ca
  6. // @version         8
  7. // @include         http://www.crunchyroll.com/*
  8. // @include         https://docs.google.com/file/*
  9. // @include         https://drive.google.com/drive/*
  10. // @include         https://vimeo.com/*
  11. // @include         http://onepieceofficial.com/videos.aspx*
  12. // @include         http://www.onepieceofficial.com/videos.aspx*
  13. // @include         http://eachvideo.com/watch*
  14. // @include         http://olympics.cbc.ca/video/live/*
  15. // @grant           GM_addStyle
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.     var fixedOverlayPlayer = function(selector) {
  20.         var css = selector + "{";
  21.         css += "position: fixed;";
  22.         css += "top: 0;";
  23.         css += "left: 0;";
  24.         css += "right: 0;";
  25.         css += "bottom: 0;";
  26.         css += "}";
  27.         GM_addStyle(css);
  28.     };
  29.     
  30.     var absoluteTopPlayer = function(selector, staticSelectors) {
  31.         var css = selector + "{";
  32.         css += "position: absolute;";
  33.         css += "top: 0;";
  34.         css += "left: 0;";
  35.         css += "width: 100vw;";
  36.         css += "height: 100vh;";
  37.         css += "padding: 0;";
  38.         css += "margin: 0;";
  39.         css += "}";
  40.         css += "body {";
  41.         css += "margin-top: 100vh;";
  42.         css += "margin-top: 100vh;";
  43.         css += "padding-top: 0;";
  44.         css += "}";
  45.         if (staticSelectors) {
  46.             css += staticSelectors + "{";
  47.             css += "position: static";
  48.             css += "}";
  49.         }
  50.         GM_addStyle(css);
  51.     };
  52.     
  53.     var movedTopPlayer = function(videoBoxElement) {
  54.         document.body.insertBefore(videoBoxElement, document.body.firstChild);
  55.         videoBoxElement.style.width = '100%';
  56.         videoBoxElement.style.height = '100%';
  57.         videoBoxElement.style.backgroundColor = '#000';
  58.     };
  59.  
  60.     var urlMatch = function(regexStr) {
  61.         regexStr = regexStr.replace(/\//g, '\\/'); // Auto escape forward slashes to make url regexes more legible.
  62.         var regex = new RegExp(regexStr);
  63.         return regex.exec(window.location.href);
  64.     };
  65.  
  66.     if (window.location.href.match(/^http:\/\/www\.crunchyroll\.(com|ca)\/.+\/.+-\d+\/?/)) {
  67.         var videoBoxElement = document.getElementById('showmedia_video_box') || document.getElementById('showmedia_video_box_wide');
  68.         if (!videoBoxElement) return;
  69.         movedTopPlayer(videoBoxElement);
  70.         var css = 'html, body { width: 100%; height: 100%; }';
  71.         css += '#showmedia_video_box, #showmedia_video_box_wide, #showmedia_video_player { width: 100%; height: calc(100vh + 32px) !important; }';
  72.         GM_addStyle(css);
  73.     } else if (document.location.href.startsWith('https://docs.google.com/file/')) {
  74.         fixedOverlayPlayer('#drive-viewer-video-player-object-0');
  75.     } else if (document.location.href.startsWith('https://drive.google.com/drive/')) {
  76.         fixedOverlayPlayer('#drive-viewer-video-player-object-0');
  77.     } else if (document.location.href.startsWith('https://vimeo.com/')) {
  78.         var css = '.player_area-wrapper, .player_area, .player_container, .player, .video-wrapper, .video, .video * { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; }';
  79.         css += '.clip_main > *:not(.player_area-wrapper) { margin-top: 70px; }';
  80.         css += '.body_ribbon, .topnav_desktop, .topnav_mobile { position: absolute; top: 100vh; width: 100%; }';
  81.         css += '.topnav_desktop { top: calc(100vh + 5px); }';
  82.         GM_addStyle(css);
  83.         
  84.         // autoplay
  85.         function tick() {
  86.             var e = document.querySelector('button.play[aria-label="Play"]');
  87.             if (e) {
  88.                 e.click();
  89.             } else {
  90.                 setTimeout(tick, 100);
  91.             }
  92.         }
  93.         setTimeout(tick, 100);
  94.     } else if (document.location.host.endsWith('onepieceofficial.com')) {
  95.         movedTopPlayer(document.querySelector('#FUNimationVideo'));
  96.     } else if (document.location.host.endsWith('eachvideo.com')) {
  97.         absoluteTopPlayer('.videoWrapper', '.navbar.navbar-default.navbar-fixed-top.bs-docs-nav, .col-md-8.row-border');
  98.     } else if (document.location.host == 'olympics.cbc.ca') {
  99.         movedTopPlayer(document.querySelector('.cbc-video--player-wrapper'));
  100.         function onResize() {
  101.             var videoBoxElement = document.querySelector('.cbc-video--player-wrapper');
  102.             var height = 59 + window.innerWidth * 0.5625 + window.innerHeight * 0.06;
  103.             if (height > window.innerHeight) {
  104.                 videoBoxElement.style.width = "calc((94vh - 59px) * 1.777777777)";
  105.                 videoBoxElement.style.height = "100vh";
  106.                 videoBoxElement.style.margin = '0 auto';
  107.             } else {
  108.                 videoBoxElement.style.width = "100vw";
  109.                 videoBoxElement.style.height = "calc(59px + 56.25vw + 6vh)";
  110.             }
  111.         }
  112.         window.addEventListener('resize', onResize);
  113.         onResize();
  114.     }
  115. })();