☰

Zoom function for YouTube

Add zoom function to YouTube video player.

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

  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
  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. 		if(player_aspect_ratio < select_aspect_ratio){
  26. 			//fit width
  27. 			var scale_up_ratio = $("#movie_player").width() / select_rect.width;
  28. 			centering_offset.y = ($("#movie_player").height() - select_rect.height * scale_up_ratio) / 2;
  29. 		}else{
  30. 			//fit height
  31. 			var scale_up_ratio = $("#movie_player").height() / select_rect.height;
  32. 			centering_offset.x = ($("#movie_player").width() - select_rect.width * scale_up_ratio) / 2;
  33. 		}
  34. 		
  35. 		$("video").animate({
  36. 			top: select_rect.y * scale_up_ratio * -1 + centering_offset.y + "px",
  37. 			left: select_rect.x * scale_up_ratio * -1 + centering_offset.x + "px",
  38. 			width: $("video").width() * scale_up_ratio,
  39. 			height: $("video").height() * scale_up_ratio
  40. 		}, 500);
  41. 		
  42. 		now_scale_up = true;
  43. 	}
  44. 	
  45. 	var video_scaledown = function(){
  46. 		$("video").animate({
  47. 			top: save_css.top,
  48. 			left: save_css.left,
  49. 			width: save_css.width,
  50. 			height: save_css.height
  51. 		}, 500);
  52. 		
  53. 		now_scale_up = false;
  54. 	}
  55. 	
  56. 	//set event handler
  57. 	var now_scale_up = false;
  58. 	var mousedown_offset = null;
  59. 	var save_css = null;
  60. 	$("video").mousedown(function(e){
  61. 		mousedown_offset = {offsetX: e.offsetX, offsetY: e.offsetY};
  62. 		
  63. 		if(!now_scale_up){
  64. 			save_css = {
  65. 				top: $("video").css("top"),
  66. 				left: $("video").css("left"),
  67. 				width: $("video").css("width"),
  68. 				height: $("video").css("height")
  69. 			}
  70. 		}
  71. 	});
  72. 	
  73. 	$("video").mouseup(function(e){
  74. 		var select_rect = {
  75. 			width: Math.abs(e.offsetX - mousedown_offset.offsetX),
  76. 			height: Math.abs(e.offsetY - mousedown_offset.offsetY),
  77. 			x: Math.min(mousedown_offset.offsetX, e.offsetX),
  78. 			y: Math.min(mousedown_offset.offsetY, e.offsetY)
  79. 		}
  80. 		
  81. 		if(select_rect.width <= 10 || select_rect.height <= 10){
  82. 			if(now_scale_up){
  83. 				video_scaledown();
  84. 			}
  85. 		}else{
  86. 			if(!now_scale_up){
  87. 				video_scaleup(select_rect);
  88. 			}
  89. 		}
  90. 	});
  91. 	
  92. 	$(document).keydown(function(key){
  93. 		if(key.keyCode == 82){
  94. 			video_scaledown();
  95. 		}
  96. 	});
  97. })(jQuery);