☰

YouTube Video WindowOpener

YouTube動画・配信を別ウィンドウで開くアイコンを設置

  1. // ==UserScript==
  2. // @name         YouTube Video WindowOpener
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.5
  5. // @description  YouTube動画・配信を別ウィンドウで開くアイコンを設置
  6. // @author       You
  7. // @include        https://www.youtube.com/watch?v=*
  8. // @include      https://www.youtube.com/embed/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  10. // @grant        none
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. //動画プレイヤー
  15. const player = document.querySelector('#movie_player')
  16.  
  17. //ライブ配信の左上にBufferを表示
  18. let liveBufferLatency
  19.  
  20.  
  21. //SVGアイコン追加
  22. if(location.pathname == "/watch"){
  23.  
  24. 	document.querySelector('[aria-label="設定"]').insertAdjacentHTML("afterend", `
  25. <div  id="windowOpen" class="ytp-button" aria-label="別ウィンドウで開く" title="別ウィンドウで開く" data-title-no-tooltip="別ウィンドウで開く">
  26.  
  27. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" viewBox="-150 -230 975 975" style="enable-background:new 0 0 600 600;" xml:space="preserve">
  28. <style type="text/css">
  29. 	.st0{fill:#FFF;}
  30. </style>
  31. <g id="XMLID_6_">
  32. 	<path id="XMLID_11_" class="st0" d="M418.5,139.4H232.4v139.8h186.1V139.4z M464.8,46.7H46.3C20.5,46.7,0,68.1,0,93.1v325.9   c0,25.8,21.4,46.3,46.3,46.3h419.4c25.8,0,46.3-20.5,46.3-46.3V93.1C512,67.2,490.6,46.7,464.8,46.7z M464.8,418.9H46.3V92.2h419.4   v326.8H464.8z"></path>
  33. </g>
  34. </svg>
  35.  
  36. </div>`)
  37.  
  38. 	//イベント作成
  39. 	document.getElementById("windowOpen").addEventListener("click", e => {
  40. 		//動画を止める
  41. 		player.pauseVideo()
  42. 		//別ウィンドウを作成
  43. 		const VIDEO_ID = player.getVideoStats().debug_videoId
  44. 		window.open(`https://www.youtube.com/embed/${VIDEO_ID}?currentTime=${player.getCurrentTime()}`, "window_name","width=1024,height=576")
  45. 	})
  46.  
  47. }else if(location.href.match("https://www.youtube.com/embed/") && location.search.match("currentTime")){
  48.  
  49. 	//動画を再生
  50. 	player.playVideo()
  51. 	player.seekTo(+location.search.match(/\d.*/g))
  52.  
  53.  
  54.  
  55. 	setTimeout( () => {
  56. 		const stats = document.querySelector('#movie_player').getVideoStats() || {};
  57.  
  58. 		if (stats.live !== 'live') {
  59. 			return;
  60. 		}else{
  61. 			//動画左上にバッファーとテイレンシを表示
  62. 			LiveBufferAndLatency()
  63. 			//latency自動調整実行
  64. 			setInterval(speedCheck,100)
  65. 		}
  66. 	},1000)
  67.  
  68. }
  69.  
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76.  
  77. function speedCheck(){
  78.  
  79. 	const Buffer = getBufferHealth(player)
  80.  
  81. 	liveBufferLatency.textContent = `Buffer: ${Buffer.toFixed(2)}`
  82.  
  83.  
  84. 	if((Buffer < 0) && player.getPlaybackRate() != 0.75){
  85. 		//0.5秒以下バッファーがあれば速度を更に下げる
  86. 		player.setPlaybackRate(0.75);
  87. 		console.log(0.75)
  88. 	}else if((Buffer < 0.2) && player.getPlaybackRate() != 1){
  89. 		//1.5秒以下バッファーがあれば速度を下げる
  90. 		player.setPlaybackRate(1.00);
  91. 		console.log(1)
  92. 	}else if(Buffer > 0.4 && player.getPlaybackRate() != 1.25){
  93. 		//1.5秒以上バッファーがあれば速度を上げる
  94. 		player.setPlaybackRate(1.25);
  95. 		console.log(1.25)
  96. 	}
  97.  
  98. }
  99.  
  100. function getBufferHealth(player) {
  101.     const stats = player.getVideoStats();
  102.     if (!stats) {
  103.         return 0;
  104.     }
  105.     const bufferRange = stats.vbu;
  106.     if (!bufferRange) {
  107.         return 0;
  108.     }
  109.     const buffer = bufferRange.split('-');
  110.     if (buffer.length < 2) {
  111.         return 0;
  112.     }
  113.     const bufferTime = Number(buffer.slice(-1)[0]);
  114.     const currentTime = Number(stats.vct);
  115.     if (isNaN(bufferTime) || isNaN(currentTime)) {
  116.         return 0;
  117.     }
  118.     return bufferTime - currentTime;
  119. }
  120.  
  121.  
  122. function LiveBufferAndLatency(){
  123. 	player.insertAdjacentHTML("afterbegin",`<div id="live-buffer-latency" style="
  124.     position: absolute;
  125.     z-index: 111;
  126.     background: #00000088;
  127.     "></div>`)
  128.  
  129. 	liveBufferLatency = document.getElementById("live-buffer-latency")
  130. }