Lazy Embedded Video

Lazy load embedded videos from Youtube/Dailymotion/Vimeo/Rutube/Twitch/Ustream
Verze ze dne 11. 03. 2016. Zobrazit nejnovější verzi.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==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]); }
})();