☰

Zoom function for YouTube

Add zoom function to YouTube video player.

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

  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\/watch\?v=.+/
  8. // @require        http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
  9. // @version        1.4
  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. 	$("video").mousedown(function(e){
  62. 		mousedown_offset = {offsetX: e.offsetX, offsetY: e.offsetY};
  63. 		
  64. 		if(!now_scale_up){
  65. 			save_css = {
  66. 				top: $("video").css("top"),
  67. 				left: $("video").css("left"),
  68. 				width: $("video").css("width"),
  69. 				height: $("video").css("height")
  70. 			};
  71. 		}
  72. 	});
  73. 	
  74. 	$("video").mouseup(function(e){
  75. 		var select_rect = {
  76. 			width: Math.abs(e.offsetX - mousedown_offset.offsetX),
  77. 			height: Math.abs(e.offsetY - mousedown_offset.offsetY),
  78. 			x: Math.min(mousedown_offset.offsetX, e.offsetX),
  79. 			y: Math.min(mousedown_offset.offsetY, e.offsetY)
  80. 		};
  81. 		
  82. 		if(!(select_rect.width <= 10 || select_rect.height <= 10)){
  83. 			video_scaleup(select_rect);
  84. 			return false;
  85. 		}
  86. 		
  87. 		return true;
  88. 	});
  89. 	
  90. 	var timer_id = 0;
  91. 	$("#player-api").mousemove(function(){
  92. 		$(".ytp-gradient-top").css("opacity", "1");
  93. 		$(".ytp-chrome-top").css("opacity", "1");
  94. 		$(".ytp-gradient-bottom").css("opacity", "1");
  95. 		$(".ytp-chrome-bottom").css("opacity", "1");
  96. 		
  97. 		clearTimeout(timer_id);
  98. 		
  99. 		timer_id = setTimeout(function(){
  100. 			$(".ytp-gradient-top").css("opacity", "0");
  101. 			$(".ytp-chrome-top").css("opacity", "0");
  102. 			$(".ytp-gradient-bottom").css("opacity", "0");
  103. 			$(".ytp-chrome-bottom").css("opacity", "0");
  104. 		}, 2000);
  105. 	}).mouseleave(function(){
  106. 		$(".ytp-gradient-top").css("opacity", "0");
  107. 		$(".ytp-chrome-top").css("opacity", "0");
  108. 		$(".ytp-gradient-bottom").css("opacity", "0");
  109. 		$(".ytp-chrome-bottom").css("opacity", "0");
  110. 	});
  111. 	
  112. 	$(document).keydown(function(key){
  113. 		switch(key.keyCode){
  114. 			case 82:
  115. 				video_scaledown();
  116. 			break;
  117. 		}
  118. 	});
  119. })(jQuery);