Lazy Embedded Video

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

当前为 2016-06-14 提交的版本,查看 最新版本

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

QingJ © 2025

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