Resize Video To Window Size

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

当前为 2021-02-09 提交的版本,查看 最新版本

  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 61
  7. // @include https://www.crunchyroll.com/*
  8. // @include https://static.crunchyroll.com/vilos-v2/web/vilos/player.html*
  9. // @include https://docs.google.com/file/*
  10. // @include https://drive.google.com/drive/*
  11. // @include https://drive.google.com/file/*
  12. // @include https://vimeo.com/*
  13. // @include http://onepieceofficial.com/videos.aspx*
  14. // @include http://www.onepieceofficial.com/videos.aspx*
  15. // @include https://www.youpak.com/watch*
  16. // @include https://olympics.cbc.ca/video/*
  17. // @include https://olympics.cbc.ca/divaPlayer/*
  18. // @include http://www.dailymotion.com/*
  19. // @include https://www.dailymotion.com/*
  20. // @include https://streamable.com/*
  21. // @include https://www.globaltv.com/shows/*
  22. // @include https://watch.globaltv.com/video/*
  23. // @include https://www.much.com/shows/south-park/episode/*/*/
  24. // @include http://*.ctvnews.ca/*
  25. // @include https://watch.cbc.ca/live/channel/*
  26. // @include https://watch.cbc.ca/live/*
  27. // @include https://www.ctv.ca/shows/*
  28. // @include https://www.ctv.ca/video/*
  29. // @include https://www.ctv.ca/*/Video*
  30. // @include https://www.ctv.ca/Movie/*
  31. // @include https://www.funimation.com/shows/*
  32. // @include https://www.funimation.com/player/*
  33. // @include https://www.crave.ca/*
  34. // @include https://tubitv.com/*
  35. // @grant GM_addStyle
  36. // ==/UserScript==
  37.  
  38. (function() {
  39. var fixedOverlayPlayer = function(selector) {
  40. var css = selector + "{";
  41. css += "position: fixed;";
  42. css += "top: 0;";
  43. css += "left: 0;";
  44. css += "right: 0;";
  45. css += "bottom: 0;";
  46. css += "}";
  47. GM_addStyle(css);
  48. };
  49.  
  50. var absoluteTopPlayer = function(selector, staticSelectors) {
  51. var css = selector + "{";
  52. css += "position: absolute;";
  53. css += "top: 0;";
  54. css += "left: 0;";
  55. css += "width: 100vw;";
  56. css += "height: 100vh;";
  57. css += "padding: 0;";
  58. css += "margin: 0;";
  59. css += "}";
  60. css += "body {";
  61. css += "margin-top: 100vh;";
  62. css += "margin-top: 100vh;";
  63. css += "padding-top: 0;";
  64. css += "}";
  65. if (staticSelectors) {
  66. css += staticSelectors + "{";
  67. css += "position: static";
  68. css += "}";
  69. }
  70. GM_addStyle(css);
  71. };
  72.  
  73. var movedTopPlayer = function(videoBoxElement) {
  74. document.body.insertBefore(videoBoxElement, document.body.firstChild);
  75. videoBoxElement.style.width = '100%';
  76. videoBoxElement.style.height = '100%';
  77. videoBoxElement.style.backgroundColor = '#000';
  78. };
  79.  
  80. var waitFor = function(selector, callback) {
  81. var tick = function(){
  82. var e = document.querySelector(selector);
  83. if (e) {
  84. callback(e);
  85. } else {
  86. setTimeout(tick, 100);
  87. }
  88. };
  89. tick();
  90. };
  91.  
  92. var bindJWPlayerSpacebar = function() {
  93. window.addEventListener('keydown', function(e){
  94. if (e.key == ' ' && e.target == document.body) {
  95. var video = document.querySelector('.jwplayer video')
  96. if (video) {
  97. e.preventDefault();
  98. if (video.paused) {
  99. video.play()
  100. } else {
  101. video.pause()
  102. }
  103. }
  104. }
  105. });
  106. };
  107.  
  108. var urlMatch = function(regexStr) {
  109. regexStr = regexStr.replace(/\//g, '\\/'); // Auto escape forward slashes to make url regexes more legible.
  110. var regex = new RegExp(regexStr);
  111. return regex.exec(window.location.href);
  112. };
  113.  
  114. if (document.location.host.endsWith('crunchyroll.com')) {
  115. // if (window.location.href == 'https://static.crunchyroll.com/vilos-v2/web/vilos/player.html') {
  116. console.log('doc loc', document.location)
  117. console.log('win loc', window.location)
  118. if (document.location.hostname == 'static.crunchyroll.com' && document.location.pathname == '/vilos-v2/web/vilos/player.html') {
  119. GM_addStyle('#vilosRoot { height: 100vh !important; }');
  120. } else if (window.location.href.match(/^https:\/\/www\.crunchyroll\.(com|ca)\/.+\/.+-\d+\/?/)) {
  121. var videoBoxElement = document.getElementById('showmedia_video_box') || document.getElementById('showmedia_video_box_wide');
  122. if (!videoBoxElement) return;
  123. movedTopPlayer(videoBoxElement);
  124. videoBoxElement.addEventListener('keydown', function(e) {
  125. if (e.key == 'PageDown') {
  126. window.scrollBy(0, window.innerHeight * 0.9);
  127. } else if (e.key == 'PageUp') {
  128. window.scrollBy(0, -window.innerHeight * 0.9);
  129. } else if (e.key == 'ArrowDown') {
  130. window.scrollBy(0, 40);
  131. } else if (e.key == 'ArrowUp') {
  132. window.scrollBy(0, -40);
  133. }
  134. }, true);
  135. var videoObject = videoBoxElement.querySelector('object');
  136. if (videoObject) {
  137. videoObject.focus();
  138. }
  139. var css = 'html, body { width: 100%; height: 100%; }';
  140. css += '#showmedia_video_box, #showmedia_video_box_wide, #showmedia_video_player { width: 100%; height: calc(100vh) !important; }';
  141. css += '.html5-video-player { width: 100% !important; height: calc(100vh) !important; }'; // https://github.com/YePpHa/crunchyroll-html5
  142. GM_addStyle(css);
  143. }
  144. } else if (document.location.href.startsWith('https://docs.google.com/file/')) {
  145. fixedOverlayPlayer('#drive-viewer-video-player-object-0');
  146. var css = 'body:not(:hover) .ytp-chrome-bottom { opacity: 0 !important; }';
  147. css += 'body:not(:hover) .drive-viewer-toolstrip { opacity: 0 !important; }';
  148. GM_addStyle(css);
  149. } else if (document.location.href.startsWith('https://drive.google.com/')) {
  150. fixedOverlayPlayer('.drive-viewer-video-player');
  151. var css = '.drive-viewer-toolstrip { opacity: 0 !important; }';
  152. css += '.drive-viewer-toolstrip:hover { opacity: 1 !important; }';
  153. GM_addStyle(css);
  154. } else if (document.location.href.startsWith('https://vimeo.com/')) {
  155. if (! /\/\d+/.exec(document.location.pathname))
  156. return;
  157. var css = '.js-player_area-wrapper, .player_area-wrapper, .player_area, .player_container, .player, .video-wrapper, .video, .video * { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; }';
  158. css += '.vp-player-layout { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; }';
  159. css += '.clip_main > *:not(.player_area-wrapper) { margin-top: 70px; }';
  160. css += '.VimeoBrand_ColorRibbon, .body_ribbon, .topnav_desktop, .topnav_mobile { position: absolute; top: 100vh; width: 100%; }';
  161. css += '.topnav_desktop { top: calc(100vh + 5px); }';
  162. GM_addStyle(css);
  163.  
  164. // autoplay
  165. function tick() {
  166. var e = document.querySelector('button.play[aria-label="Play"]');
  167. if (e) {
  168. e.click();
  169. } else {
  170. setTimeout(tick, 100);
  171. }
  172. }
  173. setTimeout(tick, 100);
  174. } else if (document.location.host.endsWith('onepieceofficial.com')) {
  175. movedTopPlayer(document.querySelector('#FUNimationVideo'));
  176. } else if (document.location.host.endsWith('youpak.com')) {
  177. movedTopPlayer(document.querySelector('.videoWrapper'))
  178. var css = 'body > .container { padding-top: 60px; }'
  179. css += '.navbar-fixed-top { position: absolute; top: 100vh; }'
  180. css += 'body { padding-top: 0; }'
  181. GM_addStyle(css)
  182. } else if (document.location.host == 'olympics.cbc.ca') {
  183. console.log(document.location.pathname, document.location.pathname.match(/\/video\/([^\/]+)\/([^\/]+)(\/?)/))
  184. if (document.location.pathname.match(/\/video\/([^\/]+)\/([^\/]+)(\/?)/)) {
  185. var css = '.cbc-video--player-wrapper { position: static !important; }'
  186. css += '.cbc-video {'
  187. css += ' position: absolute !important;'
  188. css += ' top: 0 !important;'
  189. css += ' left: 0 !important;'
  190. css += ' padding: 0px !important;'
  191. css += ' margin: 0px !important;'
  192. css += ' width: 100% !important;'
  193. css += ' height: 100vh !important;'
  194. css += '}'
  195. css += 'figure.cbc-video--thumb-wrapper, a[data-js-hook="play-video"] picture img { max-height: 100vh !important; }'
  196. css += '.or-podium .or-box { position: static !important; }'
  197. css += '.or-podium .col-xs-1, .or-podium .col-sm-1, .or-podium .col-md-1, .or-podium .col-lg-1, .or-podium .col-xs-2, .or-podium .col-sm-2, .or-podium .col-md-2, .or-podium .col-lg-2, .or-podium .col-xs-3, .or-podium .col-sm-3, .or-podium .col-md-3, .or-podium .col-lg-3, .or-podium .col-xs-4, .or-podium .col-sm-4, .or-podium .col-md-4, .or-podium .col-lg-4, .or-podium .col-xs-5, .or-podium .col-sm-5, .or-podium .col-md-5, .or-podium .col-lg-5, .or-podium .col-xs-6, .or-podium .col-sm-6, .or-podium .col-md-6, .or-podium .col-lg-6, .or-podium .col-xs-7, .or-podium .col-sm-7, .or-podium .col-md-7, .or-podium .col-lg-7, .or-podium .col-xs-8, .or-podium .col-sm-8, .or-podium .col-md-8, .or-podium .col-lg-8, .or-podium .col-xs-9, .or-podium .col-sm-9, .or-podium .col-md-9, .or-podium .col-lg-9, .or-podium .col-xs-10, .or-podium .col-sm-10, .or-podium .col-md-10, .or-podium .col-lg-10, .or-podium .col-xs-11, .or-podium .col-sm-11, .or-podium .col-md-11, .or-podium .col-lg-11, .or-podium .col-xs-12, .or-podium .col-sm-12, .or-podium .col-md-12, .or-podium .col-lg-12 { position: static; }'
  198. css += 'body:not(.cbc-main-page) { padding-top: 100vh; }'
  199. GM_addStyle(css);
  200. var playVideoButton = document.querySelector('a[data-js-hook="play-video"]')
  201. if (playVideoButton) {
  202. playVideoButton.click()
  203. }
  204. } else if (document.location.pathname.startsWith('/divaPlayer')) {
  205. var css = '#videoContainer:not(:hover) > .caption { opacity: 0; }'
  206. css += '#videoContainer:not(:hover) .controlbar-diva { opacity: 0 !important; }'
  207. css += '#videoContainer:not(:hover) #icon-menu-diva { opacity: 0; }'
  208. css += '#videoContainer:not(:hover) diva-simple-controls { opacity: 0 !important; }'
  209. GM_addStyle(css);
  210. } else {
  211. return; // Keep scrollbars
  212. }
  213. } else if (document.location.host.endsWith('www.dailymotion.com')) {
  214. var css = '#player:not(:hover) .dmp_will-transition.dmp_is-transitioned--fadeinslide { opacity: 0; }';
  215. if (document.location.pathname.startsWith('/playlist')) {
  216. css += '#player_container { height: 100vh!important; width: 100vw!important; }';
  217. css += '#playerv5-iframe { width: 100% !important; height: 100% !important; }'; // playlists
  218. css += '.sd_header.sd_header--fixed { top: 100vh; position: absolute; }';
  219. css += '#content { margin-top: 60px; }';
  220. movedTopPlayer(document.querySelector('#player_container'));
  221. absoluteTopPlayer('#player_container');
  222.  
  223. GM_addStyle(css);
  224.  
  225. } else if (document.location.pathname.startsWith('/video')) {
  226. //css +='.main-container-player { display: none; }';
  227. //css += '#player { height: 100vh!important; width: 100vw!important; }';
  228. css += '.Player { height: 100vh!important; width: 100vw!important; }';
  229. css += '.Player { top: 0!important; left: 0!important; }';
  230. css += 'header { position: absolute!important; top: 100vh !important; }';
  231. css += 'footer { margin-top: 50px; }';
  232. css += 'div[class^="Video__placeholder___"] { margin-top: -180px; height: 100vh!important; }';
  233. GM_addStyle(css);
  234. document.addEventListener('load',function(){
  235. movedTopPlayer(document.querySelector('.Player'));
  236. });
  237. }
  238.  
  239. } else if (document.location.host.endsWith('streamable.com')) {
  240. if (document.location.pathname == '/') {
  241. return;
  242. }
  243. var css = '#player-content, #player.container .media-container, #player.container #filler, #player.container .player { max-width: 100% !important; width:100%; }';
  244. css += '#player.container #filler { padding-bottom: 100vh !important; }';
  245. css += '.player { background: #000; }';
  246. css += '#player.container .player { display: flex; }';
  247. css += '.player, #player.container video { max-height: 100vh; object-fit: contain; }';
  248. css += '#player > div[style="height:15px;"] { display: none; }';
  249. css += '#player.container .topbanner { display: none; }';
  250. GM_addStyle(css);
  251. } else if (document.location.host.endsWith('globaltv.com')) {
  252. var css = 'html, body, #root, .App, .Video {'
  253. css += 'min-height: 100%; height: 100%; max-height: 100%;'
  254. css += 'min-width: 100%; width: 100%; max-width: 100%;'
  255. css += '}'
  256. css += 'body { overflow-y: auto; }'
  257. GM_addStyle(css);
  258. waitFor('.jwplayer', function(jwPlayerElement) {
  259. waitFor('.jwplayer video', function(videoElement) {
  260. setTimeout(function() {
  261. videoElement.muted = false;
  262. }, 200)
  263. });
  264. });
  265. bindJWPlayerSpacebar();
  266. } else if (document.location.host.endsWith('much.com')) {
  267. var css = '#TopVideoWidgetSection, #ShowNav, #MainHeader, #MastHeadTakeover { display: none; }';
  268. css += '#ShowTop #PlayerWrapper, #ShowTop .container-fluid, #ShowTop #ShowInfo, #ShowTop {';
  269. css += 'margin: 0 !important; padding: 0 !important;';
  270. css += 'width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important;';
  271. css += '}';
  272. css += '#ShowTop #ShowInfo #EpisodeInfo { margin-top: 0 !important; }';
  273. css += '.jwplayer { max-height: 100vh; }';
  274. css += '#EpisodeInfo .new-episodes { display: none !important; }';
  275. GM_addStyle(css);
  276. } else if (document.location.host.endsWith('ctvnews.ca')) {
  277. if (window.location.pathname == '/latest') {
  278. // Redirect to latest video
  279. document.body.style.opacity = "0"
  280. document.documentElement.style.transition = "background 0.4s"
  281. document.documentElement.style.background = "#000"
  282. var latestVideoLink = document.querySelector('.mainnavigation + .drop_down + script + .drop_down > .drop_down_element_container > div > div > ul > li:first-child > a')
  283. if (latestVideoLink) {
  284. window.location.href = latestVideoLink.href
  285. }
  286. } else if (window.location.pathname == '/video') {
  287. var contentWrapper = document.querySelector('body > .content > .video-header > .content-wrapper')
  288. if (contentWrapper) {
  289. var header = document.querySelector('body > header')
  290. document.body.insertBefore(contentWrapper, header)
  291. var mediaplayerdiv = document.querySelector('#mediaplayerdiv')
  292.  
  293. contentWrapper.querySelector('.topname').style.display = "none"
  294. contentWrapper.style.width = "100%"
  295. contentWrapper.style.height = "100vh"
  296. contentWrapper.style.maxWidth = "100vw"
  297. contentWrapper.style.maxHeight = "100vh"
  298. contentWrapper.style.background="#000"
  299.  
  300. function onWindowResize() {
  301. var viewportWidth = document.documentElement.clientWidth
  302. var viewportHeight = document.documentElement.clientHeight
  303. var translate = "translate(" + ((viewportWidth - 960)/2) + "px, " + ((viewportHeight - 540)/2) + "px)"
  304. var scale = "scale(" + Math.min(viewportWidth / 960, viewportHeight / 540) + ")"
  305. mediaplayerdiv.style.transform = translate + " " + scale
  306. }
  307. window.addEventListener('resize', onWindowResize);
  308. onWindowResize();
  309. return; // Keep scrollbars
  310. }
  311. } else {
  312. return; // Keep scrollbars
  313. }
  314. } else if (document.location.host.endsWith('watch.cbc.ca')) {
  315. var css = '#masthead { position: absolute; z-index: 1; width: 100%; opacity: 0; transition: opacity 250ms ease-in-out; }';
  316. css += '#masthead:hover { opacity: 1; }';
  317. css += '.regional-channel .container { max-width: 100%; }';
  318. css += '.player-container.live, .jwplayer.jw-flag-aspect-mode { max-height: 100vh; }';
  319. css += '.jwplayer.jw-stretch-uniform video { object-fit: contain !important; }';
  320. css += '.regional-channel footer.regional-channel-footer, section.content-article.live { padding: 10px 0; }';
  321. css += 'section.content-article.live-premium { display: none; }';
  322. css += '.upgrade-banner, .live-premium, iframe.zEWidget-launcher { display: none; }';
  323. css += '.upgrade-banner + .app-container.with-banner-large { top: 0; }';
  324. css += '.content-article { padding-top: 0; padding-bottom: 0; }';
  325. css += '.content-section.live-detail-layout { max-width: 100%; }';
  326. GM_addStyle(css);
  327. } else if (document.location.host.endsWith('www.ctv.ca')) {
  328. var css = ''
  329. css += 'header.navigation { opacity: 0; position: fixed; }'
  330. css += 'header.navigation:hover { opacity: 1; }'
  331. css += '.main { padding-top: 0 !important; }'
  332. css += '#vidi-player-standalone { margin: 0vw 0vw 0; }'
  333. css += 'div[class*="VidiPlayerstyles__VidiPlayerStandAloneContainer"] { margin: 0vw 0vw 0; }'
  334. css += '.jwplayer.jw-flag-aspect-mode { min-height: 100vh !important; height: 100vh !important; max-height: 100vh !important; }'
  335. css += 'div[class*="BrowserNotificationstyles"] { display: none; }'
  336. css += 'div[class^="ArrowBackstyles__ButtonContainer"] { display: none; }'
  337. GM_addStyle(css);
  338. waitFor('.jwplayer', function(jwPlayerElement) {
  339. waitFor('.jwplayer video', function(videoElement) {
  340. setTimeout(function() {
  341. videoElement.muted = false;
  342. }, 200)
  343. });
  344. });
  345. bindJWPlayerSpacebar();
  346. var reverseEpisodeOrder = [
  347. '/shows/the-daily-show-with-trevor-noah',
  348. ]
  349. waitFor('ul[class*="Episodesstyles__EpisodeList"]', function(ul) {
  350. if (reverseEpisodeOrder.indexOf(document.location.pathname) >= 0) {
  351. for (var i = 0; i < ul.children.length; i++) {
  352. ul.insertBefore(ul.children[i], ul.firstChild)
  353. }
  354. }
  355. });
  356. setInterval(function(){
  357. var e = document.querySelector('#__next div:not(.App)')
  358. if (e) {
  359. var h2 = e.querySelector('h2')
  360. if (h2 && h2.textContent == 'An unexpected error has occurred.') {
  361. // CTV doesn't like uBlockOrigin, so reload the page to workaround the AJAX React links breaking.
  362. window.location.reload()
  363. }
  364. }
  365. }, 100);
  366. } else if (document.location.host.endsWith('funimation.com')) {
  367. console.log('funimation.com')
  368. var videoBoxElement = document.querySelector('.video-player-section .video-player-container');
  369. console.log('videoBoxElement', videoBoxElement)
  370. if (videoBoxElement) {
  371. movedTopPlayer(videoBoxElement);
  372. videoBoxElement.classList.remove('col-md-10');
  373.  
  374. var css = 'html, body { width: 100%; height: 100%; }';
  375. css += '.video-player-container { width: 100vw !important; height: 100vh !important; }';
  376. css += '#funimation-main-site-header { position: absolute; top: 100vh; }';
  377. GM_addStyle(css);
  378. } else {
  379. console.log('location', document.location)
  380. waitFor('#brightcove-player', function(player){
  381. console.log('player', player)
  382. player.removeAttribute('muted')
  383. waitFor('.vjs-mute-control.vjs-vol-0', function(muteButton){
  384. console.log('muteButton', muteButton)
  385. muteButton.click()
  386. })
  387. })
  388. }
  389. } else if (document.location.host.endsWith('crave.ca')) {
  390. if (document.location.pathname.startsWith('/live')) return;
  391. var videoBoxElement = document.querySelector('video-player');
  392. if (!videoBoxElement) return;
  393. var css = 'footer, .back-button-wrapper, #mega-menu { display: none !important; }';
  394. css += '.container-site-margin { margin-left: 0; margin-right: 0; }';
  395. css += '.web-videoplayer { margin: 0; }';
  396. css += 'html .jwplayer.jw-flag-aspect-mode { height: 100vh !important; }';
  397. GM_addStyle(css);
  398. } else if (document.location.host.endsWith('tubitv.com')) {
  399. var css = 'header { transition: transform .3s, opacity .3s !important; }';
  400. css += 'header.hide-header { opacity: 0 !important }';
  401. css += 'header.hide-header:hover { opacity: 1 !important; }';
  402. css += 'header + div > div:first-child > div:first-child > div:nth-child(2) { top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; }';
  403. css += 'header + div > div:first-child > div:first-child > div:nth-child(2) > div:first-child > section { padding-top: 0 !important; height: 100vh !important; }';
  404. css += 'header + div > div:first-child > div:first-child > div:nth-child(2) > div:first-child > section > div > div:nth-child(2) > div:first-child { background-image: linear-gradient(0deg,rgba(0,0,0,0), rgba(0,0,0,0.25) 30%, rgba(0, 0, 0, 1) 90%); }';
  405. css += 'header + div > div:first-child > div:first-child > div:nth-child(2) > div:first-child > section > div > div:nth-child(2) > div:nth-child(2) { background-image: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.25) 30%, rgba(0, 0, 0, 1) 90%); }';
  406. css += '#captionsComponent > span { background: none !important; font-size: 3rem !important;';
  407. css += 'text-shadow: 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000, 0 0 0.5rem #000;';
  408. css += '}';
  409. GM_addStyle(css);
  410. var updateHeader = function() {
  411. var header = document.querySelector('header')
  412. if (header) {
  413. var video = document.querySelector('video')
  414. if (video) {
  415. header.classList.add('hide-header')
  416. } else {
  417. header.classList.remove('hide-header')
  418. }
  419. }
  420. }
  421. updateHeader()
  422. setInterval(updateHeader, 1000)
  423. }
  424.  
  425. GM_addStyle('html::-webkit-scrollbar { width: 0; height: 0; } body::-webkit-scrollbar { width: 0; height: 0; }');
  426. GM_addStyle('html { scrollbar-width: none; } body { scrollbar-width: none; }');
  427. })();