Lazy load embedded videos from Youtube/Dailymotion/Vimeo/Rutube/Twitch/Ustream
Per
// ==UserScript== // @name Lazy Embedded Video // @namespace [email protected] // @description Lazy load embedded videos from Youtube/Dailymotion/Vimeo/Rutube/Twitch/Ustream // @version 1.1 // @grant none // ==/UserScript== (function() { var createHtml = function(url, iframe, api, background_img) { /(https?:\/\/w*\.?([^.]+)[^\/]+)/.test(url); var provider_url = RegExp.$1, provider_name = RegExp.$2, data_convert = "", button_hsb = []; if(api.indexOf("yahooapis") != -1) data_convert += "data = data.query.results.json;"; if(provider_name == "twitch") data_convert += "data.thumbnail_url = data.preview;"+ "data.title = data.title || data.status;"+ "data.author_url = 'https://www.twitch.tv/'+(data.channel || data).name+'/profile';"+ "data.author_name = (data.channel || data).display_name;"+ "data.duration = data.length;"; if(background_img) // prevent downloading a second image data_convert += "delete data.thumbnail_url;"; switch(provider_name) { case "youtube" : button_hsb.push( 0, 100, 100); break; case "dailymotion": button_hsb.push( 60, 30, 300); break; case "vimeo" : button_hsb.push(220, 50, 220); break; case "rutube" : button_hsb.push( 0, 0, 250); break; case "twitch" : button_hsb.push(270, 50, 100); break; case "ustream" : button_hsb.push( 40, 50, 230); break; } if(!this.html) this.html = [ "<!doctype html>"+ "<html>"+ "<head>"+ "<title>Lazy Embedded Video</title>"+ "<script defer src='", api, "&callback=jsonpCallback'></script>"+ "<script>"+ "function jsonpCallback(data){", data_convert, "if(data.thumbnail_url) document.body.style.backgroundImage = 'url('+data.thumbnail_url+')';"+ "if(data.url) document.getElementById('title').setAttribute('href', data.url);"+ "if(data.title) document.getElementById('title').textContent = data.title;"+ "if(data.author_url) document.getElementById('author').setAttribute('href', data.author_url);"+ "if(data.author_name) document.getElementById('author').textContent = data.author_name;"+ "if(data.duration) document.getElementById('duration').textContent = new Date(data.duration*1000).toISOString().substr(11,8);"+ "}"+ "</script>"+ "<style>"+ "html { height: 100%; }"+ "body {"+ "margin: 0;"+ "height: 100%;"+ "background: black ", background_img, " center/100% no-repeat;"+ "}"+ "* {"+ "font: bold 14px sans-serif;"+ "color: white;"+ "text-decoration: none;"+ "}"+ "a:hover { text-decoration: underline; }"+ "ul {"+ "margin: 0;"+ "padding: 0;"+ "list-style: none;"+ "}"+ "#infobar {"+ "position: absolute;"+ "top: 0px;"+ "width: 100%;"+ "padding: 8px 16px;"+ "box-sizing: border-box;"+ "background: rgba(0,0,0,0.5);"+ "word-wrap: break-word;"+ "}"+ "#infobar_right {"+ "float: right;"+ "margin-left: 16px;"+ "text-align: right;"+ "text-transform: capitalize;"+ "}"+ "#button {"+ "height: 100%;"+ "cursor: pointer;"+ "background-position: 0px 50%;"+ "}"+ "#button:hover {"+ "background-position: -70px 50%;"+ "}"+ "#button > div {"+ "width: 70px;"+ "height: 100%;"+ "margin: auto;"+ "background: url(https://i.imgur.com/1aybyWN.png) no-repeat;"+ "background-position: inherit;"+ "filter: hue-rotate(", button_hsb[0], "deg) saturate(", button_hsb[1], "%) brightness(", button_hsb[2], "%);"+ "-webkit-filter: hue-rotate(", button_hsb[0], "deg) saturate(", button_hsb[1], "%) brightness(", button_hsb[2], "%);"+ "}"+ "</style>"+ "</head>"+ "<body>"+ "<div id=button onclick='window.location.replace(\"", iframe, "\");'><div></div></div>"+ "<div id=infobar>"+ "<ul id=infobar_right>"+ "<li><a id=author target=_blank></a></li>"+ "<li><a id=provider target=_blank href='", provider_url, "'>", provider_name, "</a></li>"+ "</ul>"+ "<ul>"+ "<li><a id=title target=_blank href='", url, "'>", url, "</a></li>"+ "<li id=duration></li>"+ "</ul>"+ "</div>"+ "</body>"+ "</html>" ]; html[ 1] = api; html[ 3] = data_convert; html[ 5] = background_img; html[ 7] = button_hsb[0]; html[ 9] = button_hsb[1]; html[11] = button_hsb[2]; html[13] = button_hsb[0]; html[15] = button_hsb[1]; html[17] = button_hsb[2]; html[19] = iframe; html[21] = provider_url; html[23] = provider_name; html[25] = url; html[27] = url; return html.join(""); }; var createOembed = function(api, url) { return api+encodeURIComponent(url); }; var createNOembed = function(api, url) { return createOembed("https://noembed.com/embed?url=", url); }; var createYOembed = function(api, url) { return createOembed("https://query.yahooapis.com/v1/public/yql?format=json&q=", 'SELECT * FROM json WHERE url="'+createOembed(api,url)+'"'); }; var createLazyVideo = function(elem) { if(elem.tagName == "IFRAME" && elem.srcdoc) return; var src = decodeURIComponent(elem.src || elem.data || elem.dataset.src); if(/youtube\.com\/(?:v|embed)\/([a-z\d_-]+)(?:.*[?&](start=\d+))?/i.test(src)) { src = createHtml(src = "https://www.youtube.com/watch?v="+RegExp.$1, "https://www.youtube.com/embed/"+RegExp.$1+"?autoplay=1"+(RegExp.$2 ? "&"+RegExp.$2 : ""), createNOembed("https://www.youtube.com/oembed?format=json&url=", src), "url(https://i.ytimg.com/vi/"+RegExp.$1+"/hqdefault.jpg)" ); } else if(/dailymotion.com\/(?:swf|embed)\/video\/([a-z\d]+)(?:.*[?&](start=\d+))?/i.test(src)) { src = createHtml(src = "https://www.dailymotion.com/video/"+RegExp.$1, "https://www.dailymotion.com/embed/video/"+RegExp.$1+"?autoplay=1"+(RegExp.$2 ? "&"+RegExp.$2 : ""), createOembed("https://www.dailymotion.com/services/oembed?format=json&url=", src), "url(https://www.dailymotion.com/thumbnail/video/"+RegExp.$1+")" ); } else if(/vimeo\.com\/(?:moogaloop\.swf.*[?&]clip_id=|video\/)(\d+)(?:.*(\#t=[\dhms]+))?/i.test(src)) { src = createHtml(src = "https://vimeo.com/"+RegExp.$1, "https://player.vimeo.com/video/"+RegExp.$1+"?autoplay=1"+RegExp.$2, createOembed("https://vimeo.com/api/oembed.json?url=", src) ); } else if(/rutube\.ru\/play\/embed\/(\d+)(?:.*[?&](bmstart=\d+))?/i.test(src)) { src = createHtml(src = "https://rutube.ru/tracks/"+RegExp.$1+".html/", "https://rutube.ru/play/embed/"+RegExp.$1+"?autoStart=1"+(RegExp.$2 ? "&"+RegExp.$2 : ""), createOembed("https://rutube.ru/api/oembed/?format=jsonp&url=", src) ); } else if(/twitch\.tv\/.*[?&](channel|video)=([a-z\d_]+)/i.test(src)) { src = createHtml(src = "https://www.twitch.tv/"+(RegExp.$1=="video" ? RegExp.$2.replace("v", "c/v/") : RegExp.$2), "https://player.twitch.tv/?"+RegExp.$1+"="+RegExp.$2+"&autoplay=true", "https://api.twitch.tv/kraken/"+RegExp.$1+"s/"+RegExp.$2+"?format=json", RegExp.$1=="channel" ? "url(https://static-cdn.jtvnw.net/previews-ttv/live_user_"+RegExp.$2+"-0x0.jpg)" : null ); } else if(/ustream\.tv\/embed\/(recorded\/)?(\d+)/i.test(src)) { src = createHtml(src = "https://www.ustream.tv/"+(RegExp.$1||"channel/")+RegExp.$2, "https://www.ustream.tv/embed/"+RegExp.$1+RegExp.$2+"?html5ui=1&autoplay=1", createYOembed("https://www.ustream.tv/oembed?format=json&url=", src) ); } else { return; } if(elem.tagName != "IFRAME") { var iframe = document.createElement("IFRAME"); iframe.id = elem.id; iframe.className = elem.className; iframe.style.cssText = elem.style.cssText; if(!iframe.style.width && elem.width ) iframe.style.width = elem.width+"px"; if(!iframe.style.height && elem.height) iframe.style.height = elem.height+"px"; if(!iframe.style.border) iframe.style.border = "0px"; if(elem.parentNode.tagName == "OBJECT") elem = elem.parentNode; elem.parentNode.replaceChild(iframe, elem); elem = iframe; } elem.setAttribute("allowfullscreen", ""); elem.setAttribute("srcdoc", src); }; for(var i = 0, nodes = document.getElementsByTagName("IFRAME"); i < nodes.length; i++) { createLazyVideo(nodes[i]); } for(var i = 0, nodes = document.getElementsByTagName("EMBED" ); i < nodes.length; i++) { createLazyVideo(nodes[i]); } for(var i = 0, nodes = document.getElementsByTagName("OBJECT"); i < nodes.length; i++) { createLazyVideo(nodes[i]); } })();
