☰

Lazy Embedded Video

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

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

  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     1.1
  6. // @grant       none
  7. // ==/UserScript==
  8.  
  9. (function() {
  10. 	var createHtml = function(url, iframe, api, background_img) {
  11. 		/(https?:\/\/w*\.?([^.]+)[^\/]+)/.test(url);
  12. 		var provider_url = RegExp.$1, provider_name = RegExp.$2, data_convert = "", button_hsb = [];
  13. 		if(api.indexOf("yahooapis") != -1)
  14. 			data_convert += "data = data.query.results.json;";
  15. 		if(provider_name == "twitch")
  16. 			data_convert += "data.thumbnail_url = data.preview;"+
  17. 							"data.title         = data.title || data.status;"+
  18. 							"data.author_url    = 'https://www.twitch.tv/'+(data.channel || data).name+'/profile';"+
  19. 							"data.author_name   = (data.channel || data).display_name;"+
  20. 							"data.duration      = data.length;";
  21. 		if(background_img) // prevent downloading a second image
  22. 			data_convert += "delete data.thumbnail_url;";
  23. 		switch(provider_name) {
  24. 			case "youtube"    : button_hsb.push(  0, 100, 100); break;
  25. 			case "dailymotion": button_hsb.push( 60,  30, 300); break;
  26. 			case "vimeo"      : button_hsb.push(220,  50, 220); break;
  27. 			case "rutube"     : button_hsb.push(  0,   0, 250); break;
  28. 			case "twitch"     : button_hsb.push(270,  50, 100); break;
  29. 			case "ustream"    : button_hsb.push( 40,  50, 230); break;
  30. 		}
  31. 		if(!this.html) this.html = [
  32. 			"<!doctype html>"+
  33. 			"<html>"+
  34. 				"<head>"+
  35. 					"<title>Lazy Embedded Video</title>"+
  36. 					"<script defer src='", api, "&callback=jsonpCallback'></script>"+
  37. 					"<script>"+
  38. 						"function jsonpCallback(data){",
  39. 							data_convert,
  40. 							"if(data.thumbnail_url) document.body.style.backgroundImage = 'url('+data.thumbnail_url+')';"+
  41. 							"if(data.url)           document.getElementById('title').setAttribute('href', data.url);"+
  42. 							"if(data.title)         document.getElementById('title').textContent    = data.title;"+
  43. 							"if(data.author_url)    document.getElementById('author').setAttribute('href', data.author_url);"+
  44. 							"if(data.author_name)   document.getElementById('author').textContent   = data.author_name;"+
  45. 							"if(data.duration)      document.getElementById('duration').textContent = new Date(data.duration*1000).toISOString().substr(11,8);"+
  46. 						"}"+
  47. 					"</script>"+
  48. 					"<style>"+
  49. 						"html { height: 100%; }"+
  50. 						"body {"+
  51. 							"margin: 0;"+
  52. 							"height: 100%;"+
  53. 							"background: black ", background_img, " center/100% no-repeat;"+
  54. 						"}"+
  55. 						"* {"+
  56. 							"font: bold 14px sans-serif;"+
  57. 							"color: white;"+
  58. 							"text-decoration: none;"+
  59. 						"}"+
  60. 						"a:hover { text-decoration: underline; }"+
  61. 						"ul {"+
  62. 							"margin: 0;"+
  63. 							"padding: 0;"+
  64. 							"list-style: none;"+
  65. 						"}"+
  66. 						"#infobar {"+
  67. 							"position: absolute;"+
  68. 							"top: 0px;"+
  69. 							"width: 100%;"+
  70. 							"padding: 8px 16px;"+
  71. 							"box-sizing: border-box;"+
  72. 							"background: rgba(0,0,0,0.5);"+
  73. 							"word-wrap: break-word;"+
  74. 						"}"+
  75. 						"#infobar_right {"+
  76. 							"float: right;"+
  77. 							"margin-left: 16px;"+
  78. 							"text-align: right;"+
  79. 							"text-transform: capitalize;"+
  80. 						"}"+
  81. 						"#button {"+
  82. 							"height: 100%;"+
  83. 							"cursor: pointer;"+
  84. 							"background-position: 0px 50%;"+
  85. 						"}"+
  86. 						"#button:hover {"+
  87. 							"background-position: -70px 50%;"+
  88. 						"}"+
  89. 						"#button > div {"+
  90. 							"width: 70px;"+
  91. 							"height: 100%;"+
  92. 							"margin: auto;"+
  93. 							"background: url(https://i.imgur.com/1aybyWN.png) no-repeat;"+
  94. 							"background-position: inherit;"+
  95. 							"filter: hue-rotate(", button_hsb[0], "deg) saturate(", button_hsb[1], "%) brightness(", button_hsb[2], "%);"+
  96. 							"-webkit-filter: hue-rotate(", button_hsb[0], "deg) saturate(", button_hsb[1], "%) brightness(", button_hsb[2], "%);"+
  97. 						"}"+
  98. 					"</style>"+
  99. 				"</head>"+
  100. 				"<body>"+
  101. 					"<div id=button onclick='window.location.replace(\"", iframe, "\");'><div></div></div>"+
  102. 					"<div id=infobar>"+
  103. 						"<ul id=infobar_right>"+
  104. 							"<li><a id=author target=_blank></a></li>"+
  105. 							"<li><a id=provider target=_blank href='", provider_url, "'>", provider_name, "</a></li>"+
  106. 						"</ul>"+
  107. 						"<ul>"+
  108. 							"<li><a id=title target=_blank href='", url, "'>", url, "</a></li>"+
  109. 							"<li id=duration></li>"+
  110. 						"</ul>"+
  111. 					"</div>"+
  112. 				"</body>"+
  113. 			"</html>"
  114. 		];
  115. 		html[ 1] = api;
  116. 		html[ 3] = data_convert;
  117. 		html[ 5] = background_img;
  118. 		html[ 7] = button_hsb[0];
  119. 		html[ 9] = button_hsb[1];
  120. 		html[11] = button_hsb[2];
  121. 		html[13] = button_hsb[0];
  122. 		html[15] = button_hsb[1];
  123. 		html[17] = button_hsb[2];
  124. 		html[19] = iframe;
  125. 		html[21] = provider_url;
  126. 		html[23] = provider_name;
  127. 		html[25] = url;
  128. 		html[27] = url;
  129. 		return html.join("");
  130. 	};
  131.  
  132. 	var createOembed  = function(api, url) { return api+encodeURIComponent(url); };
  133. 	var createNOembed = function(api, url) { return createOembed("https://noembed.com/embed?url=", url); };
  134. 	var createYOembed = function(api, url) { return createOembed("https://query.yahooapis.com/v1/public/yql?format=json&q=",
  135. 																 'SELECT * FROM json WHERE url="'+createOembed(api,url)+'"'); };
  136.  
  137. 	var createLazyVideo = function(elem) {
  138. 		if(elem.tagName == "IFRAME" && elem.srcdoc) return;
  139. 		var src = decodeURIComponent(elem.src || elem.data || elem.dataset.src);
  140. 		if(/youtube\.com\/(?:v|embed)\/([a-z\d_-]+)(?:.*[?&](start=\d+))?/i.test(src)) {
  141. 			src = createHtml(src =
  142. 				"https://www.youtube.com/watch?v="+RegExp.$1,
  143. 				"https://www.youtube.com/embed/"+RegExp.$1+"?autoplay=1"+(RegExp.$2 ? "&"+RegExp.$2 : ""),
  144. 				createNOembed("https://www.youtube.com/oembed?format=json&url=", src),
  145. 				"url(https://i.ytimg.com/vi/"+RegExp.$1+"/hqdefault.jpg)"
  146. 			);
  147. 		} else if(/dailymotion.com\/(?:swf|embed)\/video\/([a-z\d]+)(?:.*[?&](start=\d+))?/i.test(src)) {
  148. 			src = createHtml(src =
  149. 				"https://www.dailymotion.com/video/"+RegExp.$1,
  150. 				"https://www.dailymotion.com/embed/video/"+RegExp.$1+"?autoplay=1"+(RegExp.$2 ? "&"+RegExp.$2 : ""),
  151. 				createOembed("https://www.dailymotion.com/services/oembed?format=json&url=", src),
  152. 				"url(https://www.dailymotion.com/thumbnail/video/"+RegExp.$1+")"
  153. 			);
  154. 		} else if(/vimeo\.com\/(?:moogaloop\.swf.*[?&]clip_id=|video\/)(\d+)(?:.*(\#t=[\dhms]+))?/i.test(src)) {
  155. 			src = createHtml(src =
  156. 				"https://vimeo.com/"+RegExp.$1,
  157. 				"https://player.vimeo.com/video/"+RegExp.$1+"?autoplay=1"+RegExp.$2,
  158. 				createOembed("https://vimeo.com/api/oembed.json?url=", src)
  159. 			);
  160. 		} else if(/rutube\.ru\/play\/embed\/(\d+)(?:.*[?&](bmstart=\d+))?/i.test(src)) {
  161. 			src = createHtml(src =
  162. 				"https://rutube.ru/tracks/"+RegExp.$1+".html/",
  163. 				"https://rutube.ru/play/embed/"+RegExp.$1+"?autoStart=1"+(RegExp.$2 ? "&"+RegExp.$2 : ""),
  164. 				createOembed("https://rutube.ru/api/oembed/?format=jsonp&url=", src)
  165. 			);
  166. 		} else if(/twitch\.tv\/.*[?&](channel|video)=([a-z\d_]+)/i.test(src)) {
  167. 			src = createHtml(src =
  168. 				"https://www.twitch.tv/"+(RegExp.$1=="video" ? RegExp.$2.replace("v", "c/v/") : RegExp.$2),
  169. 				"https://player.twitch.tv/?"+RegExp.$1+"="+RegExp.$2+"&autoplay=true",
  170. 				"https://api.twitch.tv/kraken/"+RegExp.$1+"s/"+RegExp.$2+"?format=json",
  171. 				RegExp.$1=="channel" ? "url(https://static-cdn.jtvnw.net/previews-ttv/live_user_"+RegExp.$2+"-0x0.jpg)" : null
  172. 			);
  173. 		} else if(/ustream\.tv\/embed\/(recorded\/)?(\d+)/i.test(src)) {
  174. 			src = createHtml(src =
  175. 				"https://www.ustream.tv/"+(RegExp.$1||"channel/")+RegExp.$2,
  176. 				"https://www.ustream.tv/embed/"+RegExp.$1+RegExp.$2+"?html5ui=1&autoplay=1",
  177. 				createYOembed("https://www.ustream.tv/oembed?format=json&url=", src)
  178. 			);
  179. 		} else {
  180. 			return;
  181. 		}
  182. 		if(elem.tagName != "IFRAME") {
  183. 			var iframe = document.createElement("IFRAME");
  184. 			iframe.id            = elem.id;
  185. 			iframe.className     = elem.className;
  186. 			iframe.style.cssText = elem.style.cssText;
  187. 			if(!iframe.style.width  && elem.width ) iframe.style.width  = elem.width+"px";
  188. 			if(!iframe.style.height && elem.height) iframe.style.height = elem.height+"px";
  189. 			if(!iframe.style.border)                iframe.style.border = "0px";
  190. 			if(elem.parentNode.tagName == "OBJECT")
  191. 				elem = elem.parentNode;
  192. 			elem.parentNode.replaceChild(iframe, elem);
  193. 			elem = iframe;
  194. 		}
  195. 		elem.setAttribute("allowfullscreen", "");
  196. 		elem.setAttribute("srcdoc", src);
  197. 	};
  198.  
  199. 	for(var	i = 0, nodes = document.getElementsByTagName("IFRAME"); i < nodes.length; i++) { createLazyVideo(nodes[i]); }
  200. 	for(var	i = 0, nodes = document.getElementsByTagName("EMBED" ); i < nodes.length; i++) { createLazyVideo(nodes[i]); }
  201. 	for(var	i = 0, nodes = document.getElementsByTagName("OBJECT"); i < nodes.length; i++) { createLazyVideo(nodes[i]); }
  202. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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