// ==UserScript==
// @name Lazy Embedded Video
// @namespace [email protected]
// @description Lazy load embedded videos from Youtube/Dailymotion/Vimeo/Rutube/Twitch/Ustream
// @version 1.0
// @grant none
// ==/UserScript==
(function() {
var createHtml = function(url, iframe, oembed, background_img) {
/(https?:\/\/w*\.?([^.]+)[^\/]+)/.test(url);
var provider_url = RegExp.$1, provider_name = RegExp.$2, data_convert = "", button_hsb = [0, 100, 100];
if(oembed.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" : break;
case "dailymotion": button_hsb = [ 60, 30, 300]; break;
case "vimeo" : button_hsb = [220, 50, 220]; break;
case "rutube" : button_hsb = [ 0, 0, 250]; break;
case "twitch" : button_hsb = [270, 50, 100]; break;
case "ustream" : button_hsb = [ 40, 50, 230]; break;
}
if(!this.html) this.html = [
"<!doctype html>"+
"<html>"+
"<head>"+
"<title>Lazy Embedded Video</title>"+
"<script defer src='", oembed, "&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: url(https://i.imgur.com/JvKvlQE.png) center no-repeat;"+
"}"+
"#button:hover {"+
"filter: hue-rotate(", button_hsb[0], "deg) saturate(", button_hsb[1], "%) brightness(", button_hsb[2], "%);"+
"background-image: url(https://i.imgur.com/O7KLBy2.png);"+
"}"+
"</style>"+
"</head>"+
"<body>"+
"<div id=button onclick='window.location.replace(\"", iframe, "\");'></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] = oembed;
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] = iframe;
html[15] = provider_url;
html[17] = provider_name;
html[19] = url;
html[21] = 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) {
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]); }
})();
