Zoom function for YouTube

Add zoom function to YouTube video player.
目前为 2016-04-02 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name           Zoom function for YouTube
// @name:ja        YouTubeで動画をズーム
// @description    Add zoom function to YouTube video player.
// @description:ja YouTubeの動画プレイヤーにズーム機能を追加します。
// @namespace      https://twitter.com/sititou70
// @include        /https?:\/\/www\.youtube\.com\/watch\?v=.+/
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @version        1
// @grant          none
// ==/UserScript==

jQuery.noConflict();
(function($){
	//function
	var video_scaleup = function(select_rect){
		var player_aspect_ratio = $("#movie_player").width() / $("#movie_player").height();
		var select_aspect_ratio = select_rect.width / select_rect.height;
		
		var centering_offset = {
			x: 0,
			y: 0
		}
		
		if(player_aspect_ratio < select_aspect_ratio){
			//fit width
			var scale_up_ratio = $("#movie_player").width() / select_rect.width;
			centering_offset.y = ($("#movie_player").height() - select_rect.height * scale_up_ratio) / 2;
		}else{
			//fit height
			var scale_up_ratio = $("#movie_player").height() / select_rect.height;
			centering_offset.x = ($("#movie_player").width() - select_rect.width * scale_up_ratio) / 2;
		}
		
		$("video").animate({
			top: select_rect.y * scale_up_ratio * -1 + centering_offset.y + "px",
			left: select_rect.x * scale_up_ratio * -1 + centering_offset.x + "px",
			width: $("video").width() * scale_up_ratio,
			height: $("video").height() * scale_up_ratio
		}, 500);
		
		now_scale_up = true;
	}
	
	var video_scaledown = function(){
		$("video").animate({
			top: save_css.top,
			left: save_css.left,
			width: save_css.width,
			height: save_css.height
		}, 500);
		
		now_scale_up = false;
	}
	
	//set event handler
	var now_scale_up = false;
	var mousedown_offset = null;
	var save_css = null;
	$("video").mousedown(function(e){
		mousedown_offset = {offsetX: e.offsetX, offsetY: e.offsetY};
		
		if(!now_scale_up){
			save_css = {
				top: $("video").css("top"),
				left: $("video").css("left"),
				width: $("video").css("width"),
				height: $("video").css("height")
			}
		}
	});
	
	$("video").mouseup(function(e){
		var select_rect = {
			width: Math.abs(e.offsetX - mousedown_offset.offsetX),
			height: Math.abs(e.offsetY - mousedown_offset.offsetY),
			x: Math.min(mousedown_offset.offsetX, e.offsetX),
			y: Math.min(mousedown_offset.offsetY, e.offsetY)
		}
		
		if(select_rect.width <= 10 || select_rect.height <= 10){
			if(now_scale_up){
				video_scaledown();
			}
		}else{
			if(!now_scale_up){
				video_scaleup(select_rect);
			}
		}
	});
	
	$(document).keydown(function(key){
		if(key.keyCode == 82){
			video_scaledown();
		}
	});
})(jQuery);
欢迎访问Greasy Fork镜像
