click_to_play@youtube

disable autoplay and unload player

当前为 2015-05-15 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==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);