☰

Zoom function for YouTube

Add zoom function to YouTube video player.

当前为 2017-03-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name           Zoom function for YouTube
  3. // @name:ja        YouTubeで動画をズーム
  4. // @description    Add zoom function to YouTube video player.
  5. // @description:ja YouTubeの動画プレイヤーにズーム機能を追加します。
  6. // @namespace      https://twitter.com/sititou70
  7. // @include        /https?:\/\/www\.youtube\.com.*/
  8. // @require        https://code.jquery.com/jquery-3.2.1.min.js
  9. // @version        1.5
  10. // @grant          none
  11. // ==/UserScript==
  12.  
  13. jQuery.noConflict();
  14. (function($){
  15. 	//function
  16. 	var video_scaleup = function(select_rect){
  17. 		var player_aspect_ratio = $("#movie_player").width() / $("#movie_player").height();
  18. 		var select_aspect_ratio = select_rect.width / select_rect.height;
  19. 		
  20. 		var centering_offset = {
  21. 			x: 0,
  22. 			y: 0
  23. 		};
  24. 		
  25. 		var scale_up_ratio = null;
  26. 		if(player_aspect_ratio < select_aspect_ratio){
  27. 			//fit width
  28. 			scale_up_ratio = $("#movie_player").width() / select_rect.width;
  29. 			centering_offset.y = ($("#movie_player").height() - select_rect.height * scale_up_ratio) / 2;
  30. 		}else{
  31. 			//fit height
  32. 			scale_up_ratio = $("#movie_player").height() / select_rect.height;
  33. 			centering_offset.x = ($("#movie_player").width() - select_rect.width * scale_up_ratio) / 2;
  34. 		}
  35. 		
  36. 		$("video").stop().animate({
  37. 			top: select_rect.y * scale_up_ratio * -1 + centering_offset.y + "px",
  38. 			left: select_rect.x * scale_up_ratio * -1 + centering_offset.x + "px",
  39. 			width: $("video").width() * scale_up_ratio,
  40. 			height: $("video").height() * scale_up_ratio
  41. 		}, 500);
  42. 		
  43. 		now_scale_up = true;
  44. 	};
  45. 	
  46. 	var video_scaledown = function(){
  47. 		$("video").stop().animate({
  48. 			top: save_css.top,
  49. 			left: save_css.left,
  50. 			width: save_css.width,
  51. 			height: save_css.height
  52. 		}, 500);
  53. 		
  54. 		now_scale_up = false;
  55. 	};
  56. 	
  57. 	//set event handler
  58. 	var now_scale_up = false;
  59. 	var mousedown_offset = null;
  60. 	var save_css = null;
  61. 	
  62. 	var timer_id = 0;
  63. 	var set_player_event = function(){
  64. 		$("#player-api").mousemove(function(){
  65. 			$(".ytp-gradient-top").css("opacity", "1");
  66. 			$(".ytp-chrome-top").css("opacity", "1");
  67. 			$(".ytp-gradient-bottom").css("opacity", "1");
  68. 			$(".ytp-chrome-bottom").css("opacity", "1");
  69. 			
  70. 			clearTimeout(timer_id);
  71. 			
  72. 			timer_id = setTimeout(function(){
  73. 				$(".ytp-gradient-top").css("opacity", "0");
  74. 				$(".ytp-chrome-top").css("opacity", "0");
  75. 				$(".ytp-gradient-bottom").css("opacity", "0");
  76. 				$(".ytp-chrome-bottom").css("opacity", "0");
  77. 			}, 2000);
  78. 		}).mouseleave(function(){
  79. 			$(".ytp-gradient-top").css("opacity", "0");
  80. 			$(".ytp-chrome-top").css("opacity", "0");
  81. 			$(".ytp-gradient-bottom").css("opacity", "0");
  82. 			$(".ytp-chrome-bottom").css("opacity", "0");
  83. 		});
  84. 		$("video").mousedown(function(e){
  85. 			mousedown_offset = {offsetX: e.offsetX, offsetY: e.offsetY};
  86. 			
  87. 			if(!now_scale_up){
  88. 				save_css = {
  89. 					top: $("video").css("top"),
  90. 					left: $("video").css("left"),
  91. 					width: $("video").css("width"),
  92. 					height: $("video").css("height")
  93. 				};
  94. 			}
  95. 		});
  96. 		
  97. 		$("video").mouseup(function(e){
  98. 			var select_rect = {
  99. 				width: Math.abs(e.offsetX - mousedown_offset.offsetX),
  100. 				height: Math.abs(e.offsetY - mousedown_offset.offsetY),
  101. 				x: Math.min(mousedown_offset.offsetX, e.offsetX),
  102. 				y: Math.min(mousedown_offset.offsetY, e.offsetY)
  103. 			};
  104. 			
  105. 			if(!(select_rect.width <= 10 || select_rect.height <= 10)){
  106. 				video_scaleup(select_rect);
  107. 				return false;
  108. 			}
  109. 			
  110. 			return true;
  111. 		});
  112. 	};
  113. 	
  114. 	$(document).keydown(function(key){
  115. 		switch(key.keyCode){
  116. 			case 82:
  117. 				video_scaledown();
  118. 			break;
  119. 		}
  120. 	});
  121. 	
  122. 	var observer = new MutationObserver(function(){
  123. 		if($("#player-api").length === 1)set_player_event();
  124. 	});
  125. 	observer.observe($("#page")[0], {
  126. 		attributes: true
  127. 	});
  128. })(jQuery);