Greasy Fork is available in English.
Lazy load embedded videos from Youtube/Dailymotion/Vimeo/Rutube/Twitch/Ustream
Fra
// ==UserScript==
// @name Lazy Embedded Video
// @namespace zeusex81@gmail.com
// @description Lazy load embedded videos from Youtube/Dailymotion/Vimeo/Rutube/Twitch/Ustream
// @version 2.0
// @grant none
// ==/UserScript==
(function() {
try {
if(/youtube|dailymotion|vimeo|rutube|twitch|ustream/i.test(top.location.hostname))
return;
} catch(e) {}
var testCSP = function() {
if(!document.getElementById("zeusCSP")) {
var script = document.createElement("SCRIPT");
script.id = "zeusCSP";
script.text = "CSP_AllowInlineScript = true;";
document.head.appendChild(script);
}
return window.CSP_AllowInlineScript;
};
var html, a;
var createHtml = function(url, iframe, api, background_img) {
/(.*\/\/(?:[^.\/]+\.)?([^.\/]+)\.[^.\/]+)\//i.test(url);
var provider_url = RegExp.$1, provider_name = RegExp.$2, data_convert = "", extra_script = "", button_hsb = [];
if(api.includes("yahooapis"))
data_convert += "data = data.query.results.json;";
if(provider_name == "twitch") {
if(background_img) { // channel live
data_convert += "data.title = data.status || 'Untitled Broadcast';"+
"data.author_url = '"+provider_url+"/'+data.name+'/profile';"+
"data.author_name = data.display_name;"+
"data.duration = data.game && 'playing <a target=_blank href=\""+provider_url+"/directory/game/'+data.game+'\">'+data.game+'</b>';"+
"offline_image = data.video_banner;";
extra_script += "<script defer src='https://api.twitch.tv/kraken/streams?channel="+url.match(/[^\/]+$/)[0]+"&callback=jsonpCallback2'></script>"+
"<script>"+
"function jsonpCallback2(data) {"+
"if(data.streams.length != 0) return;"+
"document.body.style.backgroundImage = 'url('+offline_image+')';"+
"document.getElementById('duration').textContent = 'offline';"+
"}"+
"</script>";
} else { // video recorded
data_convert += "data.thumbnail_url = data.preview;"+
"data.author_url = '"+provider_url+"/'+data.channel.name+'/profile';"+
"data.author_name = data.channel.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(!html) 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').href = data.url;"+
"if(data.title) document.getElementById('title').textContent = "+
"document.getElementById('title').title = data.title;"+
"if(data.author_url) document.getElementById('author').href = data.author_url;"+
"if(data.author_name) document.getElementById('author').textContent = data.author_name;"+
"if(data.duration) {"+
"if(Number(data.duration))"+
"document.getElementById('duration').textContent = new Date(data.duration*1000).toISOString().substr(11,8);"+
"else document.getElementById('duration').innerHTML = data.duration;"+
"}"+
"}"+
"</script>",
extra_script,
"<style>"+
"html { height: 100%; }"+
"body {"+
"margin: 0;"+
"height: 100%;"+
"background: black ", background_img, " center/100% no-repeat;"+
"color: white;"+
"font: 14px sans-serif;"+
"}"+
"a {"+
"color: inherit;"+
"font-weight: bold;"+
"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%;"+
"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], "%);"+
"}"+
"#button > div {"+
"width: 70px;"+
"height: 100%;"+
"margin: auto;"+
"background: url(//i.imgur.com/1aybyWN.png) no-repeat;"+
"background-position: inherit;"+
"}"+
"#titleBlock {"+
"overflow: hidden;"+
"max-height: 34px;"+
"}"+
"</style>"+
"</head>"+
"<body>"+
"<div id=button onclick='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 id=titleBlock><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] = extra_script;
html[ 7] = background_img;
html[ 9] = button_hsb[0];
html[11] = button_hsb[1];
html[13] = button_hsb[2];
html[15] = button_hsb[0];
html[17] = button_hsb[1];
html[19] = button_hsb[2];
html[21] = iframe;
html[23] = provider_url;
html[25] = provider_name;
html[27] = url;
html[29] = url;
};
var createOembed = function(api, url) { return api+encodeURIComponent(url); };
var createNOembed = function(api, url) { return createOembed("//noembed.com/embed?url=", location.protocol+url); };
var createYOembed = function(api, url) { return createOembed("//query.yahooapis.com/v1/public/yql?format=json&q=",
'SELECT * FROM json WHERE url="'+createOembed(location.protocol+api,url)+'"'); };
var createLazyVideo = function(elem) {
if(elem.tagName == "IFRAME" && elem.srcdoc) return true;
var id, args, url = elem.src || elem.data || elem.dataset.src;
if(!url) return true;
if(!a) a = document.createElement("A");
a.href = url;
/([^.]+)\.[^.]+$/i.test(a.hostname);
switch(RegExp.$1) {
case "youtube" :
if(/\/(?:v|embed)\/([^&]*)/i.test(a.pathname))
id = RegExp.$1 || (/[?&]v=([^&]+)/i.test(a.search) && RegExp.$1);
if(!id || !testCSP()) return !id;
args = "?autoplay=1";
if(/[?&](list=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
if(/[?&](start=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
createHtml(url =
"//www.youtube.com/watch"+args+"&v="+id,
"//www.youtube.com/embed/"+id+args,
createNOembed("//www.youtube.com/oembed?format=json&url=", url),
"url(//i.ytimg.com/vi/"+id+"/hqdefault.jpg)"
);
break;
case "dailymotion" :
if(/\/(?:swf|embed)\/video\/([^&_]+)/i.test(a.pathname)) id = RegExp.$1;
if(!id || !testCSP()) return !id;
args = "?autoplay=1";
if(/[?&](mute=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
if(/[?&](start=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
createHtml(url =
"//www.dailymotion.com/video/"+id+args,
"//www.dailymotion.com/embed/video/"+id+args,
createOembed("//www.dailymotion.com/services/oembed?format=json&url=", location.protocol+url),
"url(//www.dailymotion.com/thumbnail/video/"+id+")"
);
break;
case "vimeo" :
if(/\/(?:moogaloop\.swf|video\/)([^&]*)/i.test(a.pathname))
id = RegExp.$1 || (/[?&]clip_id=([^&]+)/i.test(a.search) && RegExp.$1);
if(!id || !testCSP()) return !id;
args = "?autoplay=1";
if(/[?&](loop=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
if(/(\#t=[\dhms]+)/i.test(a.hash)) args += RegExp.$1;
createHtml(url =
"//vimeo.com/"+id+args,
"//player.vimeo.com/video/"+id+args,
createOembed("//vimeo.com/api/oembed.json?url=", url)
);
break;
case "rutube" :
if(/\/play\/embed\/([a-z\d]+)/i.test(a.pathname)) id = RegExp.$1;
if(!id || !testCSP()) return !id;
args = "?autoStart=1";
if(/[?&](bmstart=[^&]+)/i.test(a.search)) args += "&"+RegExp.$1;
createHtml(url =
"//rutube.ru/"+(isNaN(id) ? "video/"+id+"/" : "tracks/"+id+".html/")+args,
"//rutube.ru/play/embed/"+id+args,
createOembed("//rutube.ru/api/oembed/?format=jsonp&url=", url)
);
break;
case "twitch" :
if(/[?&](channel|video)=([^&]+)/i.test(a.search)) {args = RegExp.$1; id = RegExp.$2;}
else if(/\/(.+)\/embed/i.test(a.pathname)) {args = "channel"; id = RegExp.$1;}
if(!id || !testCSP()) return !id;
createHtml(url =
"//www.twitch.tv/"+(args=="video" ? id.replace("v","c/v/") : id),
"//player.twitch.tv/?autoplay=true&"+args+"="+id,
"https://api.twitch.tv/kraken/"+args+"s/"+id+"?",
args=="channel" ? "url(//static-cdn.jtvnw.net/previews-ttv/live_user_"+id+"-0x0.jpg)" : null
);
break;
case "ustream" :
if(/(?:\/embed)?\/(recorded\/)?([^&]+)/i.test(a.pathname)) {args = RegExp.$1; id = RegExp.$2;}
if(!id || !testCSP()) return !id;
createHtml(url =
"//www.ustream.tv/"+(args||"channel/")+id,
"//www.ustream.tv/embed/"+args+id+"?html5ui=1&autoplay=1",
createYOembed("//www.ustream.tv/oembed?format=json&url=", url)
);
break;
default :
return true;
}
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(elem.parentNode.tagName == "OBJECT") {
elem = elem.parentNode;
iframe.style.cssText = elem.style.cssText + iframe.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.borderWidth) iframe.style.borderWidth = (elem.border||0)+"px";
switch(elem.align) {
case "left" : case "right" :
if(!iframe.style.float) iframe.style.float = elem.align; break;
case "top" : case "middle" : case "bottom" :
if(!iframe.style.verticalAlign) iframe.style.verticalAlign = elem.align; break;
}
elem.parentNode.replaceChild(iframe, elem);
elem = iframe;
}
elem.allowFullscreen = true;
elem.srcdoc = html.join("");
return true;
};
// convert NodeList to Array because for some reason sometimes I wasn't able to read src when iterating directly through NodeList
var nodes = ["IFRAME", "EMBED", "OBJECT"].reduce(function(sum, value) {
return sum.concat([].slice.call(document.getElementsByTagName(value)));
}, frameElement ? [frameElement] : []);
for(var i = 0; i < nodes.length && createLazyVideo(nodes[i]); i++) {}
})();