☰

Zoom function for YouTube

Add zoom function to YouTube video player.

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

// ==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.4
// @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
		};
		
		var scale_up_ratio = null;
		if(player_aspect_ratio < select_aspect_ratio){
			//fit width
			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
			scale_up_ratio = $("#movie_player").height() / select_rect.height;
			centering_offset.x = ($("#movie_player").width() - select_rect.width * scale_up_ratio) / 2;
		}
		
		$("video").stop().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").stop().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)){
			video_scaleup(select_rect);
			return false;
		}
		
		return true;
	});
	
	var timer_id = 0;
	$("#player-api").mousemove(function(){
		$(".ytp-gradient-top").css("opacity", "1");
		$(".ytp-chrome-top").css("opacity", "1");
		$(".ytp-gradient-bottom").css("opacity", "1");
		$(".ytp-chrome-bottom").css("opacity", "1");
		
		clearTimeout(timer_id);
		
		timer_id = setTimeout(function(){
			$(".ytp-gradient-top").css("opacity", "0");
			$(".ytp-chrome-top").css("opacity", "0");
			$(".ytp-gradient-bottom").css("opacity", "0");
			$(".ytp-chrome-bottom").css("opacity", "0");
		}, 2000);
	}).mouseleave(function(){
		$(".ytp-gradient-top").css("opacity", "0");
		$(".ytp-chrome-top").css("opacity", "0");
		$(".ytp-gradient-bottom").css("opacity", "0");
		$(".ytp-chrome-bottom").css("opacity", "0");
	});
	
	$(document).keydown(function(key){
		switch(key.keyCode){
			case 82:
				video_scaledown();
			break;
		}
	});
})(jQuery);