☰

Lazy Embedded Video

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

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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