click_to_play@youtube

disable autoplay and unload player

目前为 2015-05-15 提交的版本。查看 最新版本

// ==UserScript==
// @name        click_to_play@youtube
// @namespace   click_to_play@youtube
// @namespace   https://greasyfork.org/ja/scripts/9886
// @homepageURL https://greasyfork.org/ja/scripts/9886
// @license     http://creativecommons.org/licenses/by-nc-sa/4.0/
// @description disable autoplay and unload player
// @include     http://*
// @include     https://*
// @exclude     https://www.youtube.com/*
// @author      noi
// @version     1.00
// @grant       GM_log
// ==/UserScript==


/**************************************************************
[about]
Stop youtube video autoplay, and unload the players.
It will display a thumbnail image instead.

youtubeの埋め込み動画を読みこまないように変更し、
代わりにサムネイル画像を表示します。

Firefoxのプラグイン「click-to-play」はHTML5をブロックしないので、
スクリプトを作成。

****************************
history

05/15/2015 - v1.00 release
**************************************************************/

"use strict";
var number = 0;

var xpath = [
	'//iframe[contains(@src,"youtube.com/embed/")]|',
	'//iframe[contains(@src,"youtube.com/v/")]|',
	'//embed[contains(@src,"youtube.com/v/") and not(ancestor::object)]|',
	'//object[./param[contains(@value,"youtube.com/v/")]]',
].join('');

var playButton = '<div style="transform: scale(0.875);width: 100%;height: 100%;" class="c2p_playButton"><svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: calc(50% - 30px);left:0;right:0;  width: 85px;height: 60px; margin:0 auto;"><path d="M84.15,26.4v6.35c0,2.833-0.15,5.967-0.45,9.4c-0.133,1.7-0.267,3.117-0.4,4.25l-0.15,0.95c-0.167,0.767-0.367,1.517-0.6,2.25c-0.667,2.367-1.533,4.083-2.6,5.15c-1.367,1.4-2.967,2.383-4.8,2.95c-0.633,0.2-1.316,0.333-2.05,0.4c-0.767,0.1-1.3,0.167-1.6,0.2c-4.9,0.367-11.283,0.617-19.15,0.75c-2.434,0.034-4.883,0.067-7.35,0.1h-2.95C38.417,59.117,34.5,59.067,30.3,59c-8.433-0.167-14.05-0.383-16.85-0.65c-0.067-0.033-0.667-0.117-1.8-0.25c-0.9-0.133-1.683-0.283-2.35-0.45c-2.066-0.533-3.783-1.5-5.15-2.9c-1.033-1.067-1.9-2.783-2.6-5.15C1.317,48.867,1.133,48.117,1,47.35L0.8,46.4c-0.133-1.133-0.267-2.55-0.4-4.25C0.133,38.717,0,35.583,0,32.75V26.4c0-2.833,0.133-5.95,0.4-9.35l0.4-4.25c0.167-0.966,0.417-2.05,0.75-3.25c0.7-2.333,1.567-4.033,2.6-5.1c1.367-1.434,2.967-2.434,4.8-3c0.633-0.167,1.333-0.3,2.1-0.4c0.4-0.066,0.917-0.133,1.55-0.2c4.9-0.333,11.283-0.567,19.15-0.7C35.65,0.05,39.083,0,42.05,0L45,0.05c2.467,0,4.933,0.034,7.4,0.1c7.833,0.133,14.2,0.367,19.1,0.7c0.3,0.033,0.833,0.1,1.6,0.2c0.733,0.1,1.417,0.233,2.05,0.4c1.833,0.566,3.434,1.566,4.8,3c1.066,1.066,1.933,2.767,2.6,5.1c0.367,1.2,0.617,2.284,0.75,3.25l0.4,4.25C84,20.45,84.15,23.567,84.15,26.4z M33.3,41.4L56,29.6L33.3,17.75V41.4z" class="c2p_svg" fill="#cc181e" clip-rule="evenodd" fill-rule="evenodd"/><polygon points="33.3,41.4 33.3,17.75 56,29.6" fill="#FFFFFF" clip-rule="evenodd" fill-rule="evenodd"/></svg></div>';


var blockEmbed = function(node){
	var result = document.evaluate(xpath, node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

	for(var i=0,j=result.snapshotLength;i<j;i++){
		var ele = result.snapshotItem(i);
		if(ele.hasAttribute('c2p')) continue;

		var url = ele.src;	//iframe or embed
		//object
		if(!url){
			for(var x=0,y=ele.childNodes.length; x<y; x++){
				var param = ele.childNodes[x];
				if(param.nodeName == "PARAM" && param.getAttribute("name") == "movie"){
					url = param.getAttribute("value");
					break;
				}
			}
		}
		if(!url) continue;

		var parent = ele.parentNode;

		var id = url.match(/(embed|v)\/(.+?)(\?|&|$)/)[2];
		var movieUrl = "https://www.youtube.com/watch?v=" + id;

		var src = location.protocol + '//img.youtube.com/vi/' + id + '/mqdefault.jpg';

		var thumbnail = document.createElement("div");
		thumbnail.className = 'c2p_thumbnail';
		thumbnail.setAttribute('num',number);
		thumbnail.innerHTML = playButton;
		thumbnail.style = 'min-width:320px;min-height:180px;width:'+ ele.offsetWidth +'px;height:'+ ele.offsetHeight +'px;background:url(' + src + ') no-repeat center center ; background-size: 100% 100%;';
		thumbnail.title = 'click to play!';

		var block = document.createElement("div");
		block.id = 'c2p_' + number;
		block.className = 'c2p_block';
		block.appendChild(ele);
		block.innerHTML = '<!-- ' + block.innerHTML + ' -->';

		var unBlock = function(e){
			var thumb = e.target;
			thumb.removeEventListener('click',unBlock,false);

			thumb.parentNode.removeChild(thumb);

			var num = thumb.getAttribute('num');
			var blocked = document.getElementById('c2p_' + num);
			var strTxt = blocked.innerHTML.replace(/(^\<\!\-\- | \-\-\>$)/g,'').replace(/(.*?)\>/,'$1 c2p="done">');
			var addObj = document.createElement("div");
			blocked.parentNode.replaceChild(addObj,blocked);
			addObj.innerHTML = strTxt;
		};
		thumbnail.addEventListener('click',unBlock,false);

		parent.appendChild(thumbnail);
//		thumbnail.insertAdjacentHTML('beforebegin','<a class="c2p_embedUrl" href="' + movieUrl + '" target="_blank">' + movieUrl + '</a>');
		parent.appendChild(block);
		number++;
	}
};
blockEmbed(document.documentElement);


var observer = new MutationObserver(function(mutations){
	for(var i=0,j=mutations.length;i<j;i++){
		var m = mutations[i];
		if(m.type != "childList") return;

		for(var x=0,y=m.addedNodes.length;x<y;x++){
			blockEmbed(m.addedNodes[x]);
		}
	}
});
observer.observe(document.body, {childList: true,subtree: true});


var onEventUnload = function(){
	window.removeEventListener("beforeunload", onEventUnload,false);

	observer.disconnect();
	observer = xpath = blockEmbed = null;
};
window.addEventListener('beforeunload',onEventUnload, false);