☰

Lazy Embedded Video

Lazy load embedded videos from Youtube/Dailymotion/Vimeo/Rutube/Twitch/Ustream/Coub/Vine/Facebook

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

  1. // ==UserScript==
  2. // @name        Lazy Embedded Video
  3. // @namespace   zeusex81@gmail.com
  4. // @description Lazy load embedded videos from Youtube/Dailymotion/Vimeo/Rutube/Twitch/Ustream/Coub/Vine/Facebook
  5. // @version     2.7
  6. // @include     *
  7. // @resource    playIcon https://i.imgur.com/1aybyWN.png
  8. // @grant       GM_getResourceURL
  9. // @run-at      document-start
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 	try {
  14. 		if(/^([^.]+\.)?(youtube|dailymotion|vimeo|rutube|twitch|ustream|coub|vine|facebook)\.[^.]+$/.test(top.location.hostname))
  15. 			return;
  16. 	} catch(e) {}
  17. 	var wnd = typeof(unsafeWindow) != "undefined" ? unsafeWindow : window;
  18. 	var getResourceURL = typeof(GM_getResourceURL) != "undefined" ? GM_getResourceURL :
  19. 	function(name) {
  20. 		switch(name) {
  21. 		case "playIcon" : return "//i.imgur.com/1aybyWN.png";
  22. 		}
  23. 	};
  24. 	
  25. 	var CSP = -1;
  26.     var testCSP = function() {
  27. 		if(CSP == -1) {
  28. 			var script = document.createElement("SCRIPT");
  29. 			script.innerHTML = "CSP_AllowInlineScript = true;";
  30. 			document.head.appendChild(script);
  31. 			document.head.removeChild(script);
  32. 			CSP = wnd.CSP_AllowInlineScript ? 1 : 0;
  33. 		}
  34. 		return CSP;
  35.     };
  36. 	
  37.     var html, a;
  38. 	var createHtml = function(url, iframe, api, background_img) {
  39. 		/(.*\/\/(?:[^.\/]+\.)?([^.\/]+)\.[^.\/]+)\//i.test(url);
  40. 		var provider_url = RegExp.$1, provider_name = RegExp.$2, data_convert = "", extra_script = "", button_hsb = [];
  41. 		if(api.includes("yahooapis"))
  42. 			data_convert += "data = data.query.results.json;";
  43. 		switch(provider_name) {
  44. 		case "youtube" :
  45. 			button_hsb.push(  0, 100, 100);
  46. 			data_convert += "delete data.thumbnail_url;";
  47. 			extra_script += "var img    = new Image();"+
  48. 							"img.onload = function() {"+
  49. 								"if(this.naturalWidth > 120) {"+
  50. 									"document.body.style.backgroundImage = 'url('+this.src+')';"+
  51. 									"if(this.src.includes('hqdefault_live'))"+
  52. 										"this.src = this.src.replace('hqdefault', 'maxresdefault');"+
  53. 								"} else if(this.src.includes('maxresdefault')) {"+
  54. 									"this.src = this.src.replace('maxresdefault', 'sddefault');"+
  55. 								"} else if(this.src.includes('hqdefault_live')) {"+
  56. 									"this.src = this.src.replace('hqdefault_live', 'maxresdefault');"+
  57. 								"}"+
  58. 							"};"+
  59. 							"img.src    = '"+background_img.match(/\/(.+)\//)[0]+"hqdefault_live.jpg';";
  60. 			break;
  61. 		case "dailymotion" :
  62. 			button_hsb.push( 60,  30, 300);
  63. 			data_convert += "var img    = new Image();"+
  64. 							"img.onload = function() { document.body.style.backgroundImage = 'url('+this.src+')'; };"+
  65. 							"img.src    = removeProtocol(data.thumbnail_url.replace(/\\/x240[^.]+/i, ''));"+
  66. 							"delete data.thumbnail_url;";
  67. 			break;
  68.         case "vimeo" :
  69. 			button_hsb.push(220,  50, 220);
  70. 			data_convert += "data.thumbnail_url = data.thumbnail_url.replace(/_\\d+/i, '');";
  71.             break;
  72.         case "rutube" :
  73. 			button_hsb.push(  0,   0, 100);
  74. 			data_convert += "data.thumbnail_url = data.thumbnail_url.replace(/\\?.+/i, '');";
  75.             break;
  76. 		case "twitch" :
  77. 			button_hsb.push(270,  50, 100);
  78. 			if(background_img) { // channel live
  79. 				data_convert += "data.title         = data.status || 'Untitled Broadcast';"+
  80. 								"data.author_url    = '"+provider_url+"/'+data.name+'/profile';"+
  81. 								"data.author_name   = data.display_name;"+
  82. 								"data.duration      = data.game && 'playing <a target=_blank href=\""+provider_url+
  83. 													"/directory/game/'+data.game+'\">'+data.game+'</b>';"+
  84. 					            "offline_image      = data.video_banner;";
  85. 				extra_script += "function jsonpCallback2(data) {"+
  86. 									"if(data.streams.length != 0) return;"+
  87. 									"document.body.style.backgroundImage             = 'url('+removeProtocol(offline_image)+')';"+
  88. 									"document.getElementById('duration').textContent = 'offline';"+
  89. 								"}"+
  90. 					        "</script>"+
  91. 					        "<script defer src='https://api.twitch.tv/kraken/streams?channel="+url.match(/[^\/]+$/)[0]+"&callback=jsonpCallback2'>";
  92. 			} else { // video recorded
  93. 				data_convert += "data.thumbnail_url = data.preview.replace(/\\d+x\\d+/i, '0x0');"+
  94. 								"data.author_url    = '"+provider_url+"/'+data.channel.name+'/profile';"+
  95. 								"data.author_name   = data.channel.display_name;"+
  96. 								"data.duration      = data.length;";
  97. 			}
  98. 			break;
  99. 		case "ustream" :
  100. 			button_hsb.push( 40,  50, 230);
  101. 			if(background_img) // channel live
  102. 				data_convert += "delete data.thumbnail_url;";
  103. 			break;
  104. 		case "coub" :
  105. 			button_hsb.push(240, 150, 100);
  106. 			data_convert += "data.author_url = data.channel_url;";
  107. 			break;
  108. 		case "vine" :
  109. 			button_hsb.push(170, 150, 150);
  110. 			break;
  111. 		case "facebook" :
  112. 			button_hsb.push(  0,   0, 300);
  113. 			data_convert += "if(/<a.*?>(.+)<\\/a><p>/i.test(data.html))"+
  114. 								"data.title = RegExp.$1;";
  115. 			break;
  116. 		}
  117. 		if(!html) html = [
  118. 			"<!doctype html>"+
  119. 			"<html>"+
  120. 				"<head>"+
  121. 					"<title>Lazy Embedded Video</title>"+
  122. 					"<script defer src='", api, "&callback=jsonpCallback'></script>"+
  123. 					"<script>"+
  124. 						"function removeProtocol(url) { return url.replace(/^[a-z]+:/i, ''); };"+
  125. 						"function jsonpCallback(data) {",
  126. 							data_convert,
  127. 							"if(data.thumbnail_url) document.body.style.backgroundImage           = 'url('+removeProtocol(data.thumbnail_url)+')';"+
  128. 							"if(data.url)           document.getElementById('title').href         = removeProtocol(data.url);"+
  129. 							"if(data.title)         document.getElementById('title').textContent  = "+
  130. 							                       "document.getElementById('title').title        = data.title;"+
  131. 							"if(data.author_url)    document.getElementById('author').href        = removeProtocol(data.author_url);"+
  132. 							"if(data.author_name)   document.getElementById('author').textContent = data.author_name;"+
  133. 							"if(data.duration) {"+
  134. 								"if(Number(data.duration))"+
  135. 									 "document.getElementById('duration').textContent = new Date(data.duration*1000).toISOString().substr(11,8);"+
  136. 								"else document.getElementById('duration').innerHTML   = data.duration;"+
  137. 							"}"+
  138. 						"}",
  139. 						extra_script,
  140. 					"</script>"+
  141. 					"<style>"+
  142. 						"html { height:100%; }"+
  143. 						"body { margin:0; height:100%; color:white; font:14px sans-serif;"+
  144. 								"background:black ", background_img, " center/100% no-repeat; }"+
  145. 						"a { color:inherit; font-weight:bold; text-decoration:none; }"+
  146. 						"a:hover { text-decoration:underline; }"+
  147. 						"ul { margin:0; padding:0; list-style:none; }"+
  148. 						"#infobar { position:absolute; top:0px; width:100%; padding:8px 16px;"+
  149. 									"box-sizing:border-box; background:rgba(0,0,0,0.5); word-wrap:break-word; }"+
  150. 						"#infobar_right { float:right; margin-left:16px; text-align:right; text-transform:capitalize; }"+
  151. 						"#button { height:100%; cursor:pointer; background-position:0px 50%; }"+
  152. 						"#button:hover { background-position:-70px 50%;"+
  153. 										(navigator.userAgent.includes("Firefox") ? "" : "-webkit-")+"filter:"+
  154. 										"hue-rotate(", button_hsb[0], "deg) saturate(", button_hsb[1], "%) brightness(", button_hsb[2], "%);}"+
  155. 						"#button > div { width:70px; height:100%; margin:auto; background-repeat:no-repeat; background-position:inherit; "+
  156. 										"background-image:url("+getResourceURL("playIcon")+"); }"+
  157. 						"#titleBlock { overflow:hidden; max-height:34px; }"+
  158. 					"</style>"+
  159. 				"</head>"+
  160. 				"<body>"+
  161. 					"<div id=button onclick='location.replace(\"", iframe, "\");'><div></div></div>"+
  162. 					"<div id=infobar>"+
  163. 						"<ul id=infobar_right>"+
  164. 							"<li><a id=author target=_blank></a></li>"+
  165. 							"<li><a id=provider target=_blank href='", provider_url, "'>", provider_name, "</a></li>"+
  166. 						"</ul>"+
  167. 						"<ul>"+
  168. 							"<li id=titleBlock><a id=title target=_blank href='", url, "'>", url, "</a></li>"+
  169. 							"<li id=duration></li>"+
  170. 						"</ul>"+
  171. 					"</div>"+
  172. 				"</body>"+
  173. 			"</html>"
  174. 		];
  175. 		html[ 1] = api;
  176. 		html[ 3] = data_convert;
  177. 		html[ 5] = extra_script;
  178. 		html[ 7] = background_img;
  179. 		html[ 9] = button_hsb[0];
  180. 		html[11] = button_hsb[1];
  181. 		html[13] = button_hsb[2];
  182. 		html[15] = iframe;
  183. 		html[17] = provider_url;
  184. 		html[19] = provider_name;
  185. 		html[21] = url;
  186. 		html[23] = url;
  187. 	};
  188. 	
  189. 	var createOembed   = function(api, url) { return api+encodeURIComponent(url); };
  190. 	var createNOembed  = function(api, url) { return createOembed("//noembed.com/embed?url=", url); };
  191. 	var createYOembed  = function(api, url) { return createOembed("//query.yahooapis.com/v1/public/yql?format=json&q=",
  192. 											 'SELECT * FROM json WHERE url="'+createOembed(location.protocol+api,url)+'"'); };
  193. 	
  194. 	var createLazyVideo = function(elem) {
  195. 		if(elem.tagName == "IFRAME" && elem.srcdoc) return true;
  196.         var id, args, url = elem.src || elem.data || elem.dataset.src;
  197.         if(!url) return true;
  198.         if(!a) a = document.createElement("A");
  199.         a.href = url;
  200. 		/([^.]+)\.[^.]+$/i.test(a.hostname);
  201.         switch(RegExp.$1) {
  202.         case "youtube" :
  203.             if(/\/(?:v|embed)\/([^&]*)/i.test(a.pathname))
  204. 				id = RegExp.$1 || (/[?&]v=([^&]+)/i.test(a.search) && RegExp.$1);
  205.             if(!id || !testCSP()) return !id;
  206.             args = "?autoplay=1";
  207.             if(/[?&](list=[^&]+)/i.test(a.search))  args += "&"+RegExp.$1;
  208.             if(/[?&](start=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
  209. 			createHtml(url =
  210. 				"//www.youtube.com/watch"+args+"&v="+id,
  211. 				"//www.youtube.com/embed/"+id+args,
  212. 				createNOembed("//www.youtube.com/oembed?format=json&url=", location.protocol+url),
  213. 				"url(//i.ytimg.com/vi/"+id+"/hqdefault.jpg)"
  214. 			);
  215.             break;
  216.         case "dailymotion" :
  217.             if(/\/(?:swf|embed)\/video\/([^&_]+)/i.test(a.pathname)) id = RegExp.$1;
  218.             if(!id || !testCSP()) return !id;
  219.             args = "?autoplay=1";
  220.             if(/[?&](mute=[^&]+)/i.test(a.search))  args += "&"+RegExp.$1;
  221.             if(/[?&](start=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
  222. 			createHtml(url =
  223. 				"//www.dailymotion.com/video/"+id+args,
  224. 				"//www.dailymotion.com/embed/video/"+id+args,
  225. 				createOembed("//www.dailymotion.com/services/oembed?format=json&url=", location.protocol+url),
  226. 				"url(//www.dailymotion.com/thumbnail/video/"+id+")"
  227. 			);
  228.             break;
  229.         case "vimeo" :
  230.             if(/\/(?:moogaloop\.swf|video\/)([^&]*)/i.test(a.pathname))
  231. 				id = RegExp.$1 || (/[?&]clip_id=([^&]+)/i.test(a.search) && RegExp.$1);
  232.             if(!id || !testCSP()) return !id;
  233.             args = "?autoplay=1";
  234.             if(/[?&](loop=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
  235.             if(/(\#t=[\dhms]+)/i.test(a.hash))     args += RegExp.$1;
  236. 			createHtml(url =
  237. 				"//vimeo.com/"+id+args,
  238. 				"//player.vimeo.com/video/"+id+args,
  239. 				createOembed("//vimeo.com/api/oembed.json?url=", url)
  240. 			);
  241.             break;
  242.         case "rutube" :
  243.             if(/\/play\/embed\/([^&.\/]+)/i.test(a.pathname)) id = RegExp.$1;
  244.             if(!id || !testCSP()) return !id;
  245.             args = "?autoStart=1";
  246.             if(/[?&](bmstart=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
  247. 			createHtml(url =
  248. 				"//rutube.ru/"+(isNaN(id) ? "video/"+id+"/" : "tracks/"+id+".html/")+args,
  249. 				"//rutube.ru/play/embed/"+id+args,
  250. 				createOembed("//rutube.ru/api/oembed/?format=jsonp&url=", url)
  251. 			);
  252.             break;
  253.         case "twitch" :
  254.             if(/[?&](channel|video)=([^&]+)/i.test(a.search)) {args = RegExp.$1; id = RegExp.$2;}
  255. 			else if(/\/(.+)\/embed/i.test(a.pathname))        {args = "channel"; id = RegExp.$1;}
  256.             if(!id || !testCSP()) return !id;
  257. 			createHtml(url =
  258. 				"//www.twitch.tv/"+(args=="video" ? id.replace("v","c/v/") : id),
  259. 				"//player.twitch.tv/?autoplay=true&"+args+"="+id,
  260. 				"https://api.twitch.tv/kraken/"+args+"s/"+id+"?",
  261. 				args=="channel" ? "url(//static-cdn.jtvnw.net/previews-ttv/live_user_"+id+"-0x0.jpg)" : null
  262. 			);
  263.             break;
  264.         case "ustream" :
  265.             if(/(?:\/embed)?\/(channel\/|recorded\/)?([^&]+)/i.test(a.pathname)) {args = RegExp.$1 || "channel/"; id = RegExp.$2;}
  266.             if(!id || !testCSP()) return !id;
  267. 			createHtml(url =
  268. 				"//www.ustream.tv/"+args+id,
  269. 				"//www.ustream.tv/embed/"+(args=="channel/" ? "" : args)+id+"?html5ui=1&autoplay=1",
  270. 				createYOembed("//www.ustream.tv/oembed?format=json&url=", url),
  271. 				args=="channel/" && !isNaN(id) ? "url(//static-cdn1.ustream.tv/i/channel/live/1_"+id+",640x360,b:0.jpg)" : null
  272. 			);
  273.             break;
  274.         case "coub" :
  275.             if(/\/embed\/([^&]+)/i.test(a.pathname)) id = RegExp.$1;
  276.             if(!id || !testCSP()) return !id;
  277. 			createHtml(url =
  278. 				"//coub.com/view/"+id,
  279. 				"//coub.com/embed/"+id+"?startWithHD=true&autostart=true",
  280. 				createYOembed("//coub.com/api/oembed.json?url=", url)
  281. 			);
  282.             break;
  283.         case "vine" :
  284.             if(/\/v\/([^&]+)\/embed\/([^&]+)/i.test(a.pathname)) {args = RegExp.$2; id = RegExp.$1;}
  285.             if(!id || !testCSP()) return !id;
  286. 			createHtml(url =
  287. 				"//vine.co/v/"+id,
  288. 				"//vine.co/v/"+id+"/embed/"+args+"?audio=1",
  289. 				createOembed("//vine.co/oembed.json?url=", url)
  290. 			);
  291.             break;
  292.         case "facebook" :
  293.             if(a.pathname.endsWith("/plugins/video.php") && /[?&]href=([^&]+)/i.test(a.search)) {
  294. 				url = decodeURIComponent(RegExp.$1).replace(/^[a-z]+:/i, '');
  295. 				if(/\/videos.*?\/(\d+)/i.test(url)) id = RegExp.$1;
  296. 			}
  297.             if(!id || !testCSP()) return !id;
  298. 			createHtml(
  299. 				url,
  300. 				"//www.facebook.com/plugins/video.php?autoplay=1&href="+encodeURIComponent(location.protocol+url),
  301. 				createOembed("//www.facebook.com/plugins/video/oembed.json/?url=", location.protocol+url),
  302. 				"url(//graph.facebook.com/"+id+"/picture)"
  303. 			);
  304.             break;
  305.         default :
  306.             return true;
  307.         }
  308. 		if(elem.tagName != "IFRAME") {
  309. 			var iframe = document.createElement("IFRAME");
  310. 			iframe.id            = elem.id;
  311. 			iframe.className     = elem.className;
  312. 			iframe.style.cssText = elem.style.cssText;
  313. 			if(!iframe.style.width  && elem.width ) iframe.style.width  = elem.width+"px";
  314. 			if(!iframe.style.height && elem.height) iframe.style.height = elem.height+"px";
  315. 			if(elem.parentNode.tagName == "OBJECT") {
  316. 				elem = elem.parentNode;
  317. 				iframe.style.cssText = elem.style.cssText + iframe.style.cssText;
  318. 				if(!iframe.style.width  && elem.width ) iframe.style.width  = elem.width+"px";
  319. 				if(!iframe.style.height && elem.height) iframe.style.height = elem.height+"px";
  320. 			}
  321. 			if(!iframe.style.borderWidth)       iframe.style.borderWidth   = (elem.border||0)+"px";
  322. 			switch(elem.align) {
  323. 			case "left" : case "right" :
  324. 				if(!iframe.style.float)         iframe.style.float         = elem.align; break;
  325. 			case "top" : case "middle" : case "bottom" :
  326. 				if(!iframe.style.verticalAlign) iframe.style.verticalAlign = elem.align; break;
  327. 			}
  328. 			elem.parentNode.replaceChild(iframe, elem);
  329. 			elem = iframe;
  330. 		}
  331. 		elem.allowFullscreen = true;
  332. 		elem.srcdoc = html.join("");
  333.         return true;
  334. 	};
  335. 	
  336. 	var update = function() {
  337. 		// convert NodeList to Array because for some reason sometimes I wasn't able to read src when iterating directly through NodeList
  338. 		var nodes = ["IFRAME", "EMBED", "OBJECT"].reduce(function(sum, value) {
  339. 			return sum.concat([].slice.call(document.getElementsByTagName(value)));
  340. 		}, frameElement ? [frameElement] : []);
  341. 		for(var	i = 0; i < nodes.length; i++)
  342. 			if(!createLazyVideo(nodes[i])) return;
  343. 		if(document.readyState == "loading") requestAnimationFrame(update);
  344. 	};
  345. 	update();
  346. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址