some css changes to w0bmcustom.css and glitch.css, some changes in irc.blade.php regarding the visibility of the page for non logged in users, some minor changes to the upload page and a big change to the video page by adding the first interactive upload with loops to w0bm

public/css/glitch.css

@@ -546,7 +546,7 @@ table.table.table-hover.table-condensed {
     padding: 5px;
     border: 1px solid black;
     border-radius: 5px;
-    background: linear-gradient(to top, #0a0a0aa3 0%, #163f42a6 100%);
+    background: linear-gradient(to top, #0a0a0aa3 0%, #54062726 100%);
 }
 
 .profilheader {
@@ -1087,4 +1087,15 @@ div#tag-display {
 
 .nav>li.addtagsy>a:hover {
     color: #00fbff;
+}
+
+/* Admin shizzle */
+a.sirx, a[href="https://w0bm.com/user/sirx"] {
+    color: #ff0099 !important;
+    text-transform: uppercase;
+    text-shadow: 1px 1px 2px #ff00c8, 0px -2px 0px black, 2px 0px #6eff00;
+    font-family: vcr;
+    vertical-align: middle;
+    padding-right: 5px;
+    padding-left: 5px;
 }

public/css/w0bmcustom.css

@@ -4039,4 +4039,16 @@ repeating-radial-gradient(black, transparent 100px)
 .webchat > iframe {
   width: 100%;
   min-height: 70vh;
+}
+
+/* fancy admin shizzle */
+.sirx {
+    color: #ff0099 !important;
+    text-transform: uppercase;
+    text-shadow: 1px 1px 2px #ff00c8, 0px -2px 0px black, 2px 0px #6eff00;
+    font-family: vcr;
+    padding-right: 0px;
+    padding-left: 0px;
+    font-size: 17px;
+    vertical-align: middle;
 }

public/loop/VideoLoop.js

@@ -0,0 +1,134 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.id = id + index;
+
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/flowering_nights/VideoLoop.js

@@ -0,0 +1,134 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.id = id + index;
+
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/flowering_nights/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Blühende Nacht seamless html5 loop</title>
+<link rel="stylesheet" href="style.css"></link>
+<meta charset="UTF-8">
+</head>
+
+<body>
+
+<div class="source_info">
+    <a href="../index.html"> <- back</a>
+    <span id="sinfo">Babbe Music – Blühende Nacht</span>
+    <input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/>
+</div>
+<div id="myVideoLoop">
+</div>
+<!-- <div id="html5canloop">
+<p>Seamless loop of audio and video using html5</p>
+<button onclick="change_css();">Reveal the magic</button> <button id="hidden_default" onclick="change_css_back();">Unreveal the magic</button><br />
+</div> -->
+<!-- Scripts -->
+<script src="VideoLoop.js"></script>
+<script>
+
+        window.onload = function() {
+
+                // Initialize video loop
+                videoLoopObj = new VideoLoop('myVideoLoop');
+                videoLoopObj.length = 20000;
+                videoLoopObj.paths = ['nacht6.mp4'];
+                videoLoopObj.types = ['video/mp4'];
+                videoLoopObj.init();
+        }
+
+</script>
+
+<script src="yPXnf.js" type="text/javascript"></script>
+  <script>
+
+    loopify("nacht6.ogg",ready);
+
+    function ready(err,loop){
+      if (err) {
+        console.warn(err);
+      }
+
+        loop.play();
+    }
+
+  </script>
+
+    <script>
+        function change_css(){
+            document.getElementById('myVideoLoop1').style.cssText = 'position:relative;';
+	    document.getElementById('myVideoLoop2').style.cssText = 'position:relative;';
+	    document.getElementById('hidden_default').style.cssText = 'visibility: visible;'; 
+        }
+    </script>
+
+    <script>
+        function change_css_back(){
+            document.getElementById('myVideoLoop2').style.cssText = 'position:absolute; z-index: 10000;';
+            document.getElementById('myVideoLoop1').style.cssText = 'position:absolute; z-index: 10001;'; 
+	    document.getElementById('hidden_default').style.cssText = 'visibility: hidden;';
+        }
+    </script>
+
+</script>
+
+</body>
+</html>

public/loop/flowering_nights/style.css

@@ -0,0 +1,117 @@
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+* { 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden; 
+}
+
+body {
+	background: black;
+}
+
+#myVideoLoop video { 
+	position: absolute; 
+}
+
+div#myVideoLoop {
+	height: inherit;
+	display: flex;
+	justify-content: center;
+}
+
+div#html5canloop {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    font-weight: bold;
+    padding: 10px;
+    background: #202020;
+}
+
+button#hidden_default {
+	visibility: hidden;
+}
+
+.source_info {
+    color: white;
+    width: inherit;
+    background: #0d0d0d;
+    position: fixed;
+    z-index: 1;
+    padding: 10px;
+}
+
+span#sinfo {
+    padding: 10px;
+    font-style: italic;
+    vertical-align: super;
+}
+
+  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: cover;
+    }
+  }
+
+input#volume {
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+/*******/
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: #0d0d0d;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}
+
+.source_info {
+    vertical-align: super;
+    display: flex;
+    align-items: center;
+}

public/loop/flowering_nights/yPXnf.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+		var gainNode = context.createGain();
+		gainNode.gain.value = -0.8;
+		gainNode.connect(context.destination);
+		source.connect(gainNode);	
+
+		document.getElementById('volume').addEventListener('change', function() {
+    		gainNode.gain.value = this.value;
+		});
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+<style>
+@font-face { font-family: 'pixel';
+             src: url('fonts/chesstype.ttf') format('truetype'); }
+
+a {
+    font-family: 'pixel';
+    color: white;
+    text-decoration: none;
+    padding-left: 10px;
+}
+
+a::after {
+    content: " |";
+}
+
+a:hover {
+    color: #02d370;
+    text-decoration: underline;
+}
+
+* { margin: 0px; padding: 0px; overflow: hidden; }
+body {
+  background: url(z0r_60842.gif) no-repeat center center fixed; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+html, 
+body {
+    height: 100%;
+}
+
+p {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    width: 100%;
+}
+
+.info {
+    background: black;
+    padding: 5px;
+    text-align: center;
+    bottom: 0;
+    position: fixed;
+    width: 100%;
+}
+
+/******* Chrome specific */
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: transparent;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}
+
+input#volume {
+    margin-left: 5px;
+}
+</style>
+</head>
+<body>
+<div class="info">
+  <a href="/loop/flowering_nights/index.html">Blühende Nacht</a>
+  <a href="/loop/polizei/index.html">1, 2 Polizei</a>
+  <a href="/loop/shake/index.html">Shake your booty!</a>
+</div>
+<input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/>
+  
+<script src="loopify.js" type="text/javascript"></script>
+  <script>
+
+    loopify("z0r_60842_loop.flac",ready);
+
+    function ready(err,loop){
+
+      if (err) {
+        console.warn(err);
+      }
+
+        loop.play();
+    }
+
+  </script>
+</body>
+</html>

public/loop/loopify.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+    var gainNode = context.createGain();
+    gainNode.gain.value = -0.8;
+    gainNode.connect(context.destination);
+    source.connect(gainNode); 
+
+    document.getElementById('volume').addEventListener('change', function() {
+        gainNode.gain.value = this.value;
+    });
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/polizei/alt/VideoLoop.js

@@ -0,0 +1,133 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.setAttribute("muted" , "true");
+		videoObj.setAttribute("preload" , "auto");
+		videoObj.id = id + index;
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+			
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/polizei/alt/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Blühende Nacht seamless html5 loop</title>
+<link rel="stylesheet" href="style.css"></link>
+<meta charset="UTF-8">
+</head>
+
+<body>
+
+<div class="source_info">
+    <a href="../index.html"> <- back</a>
+    <span id="sinfo">Eins Zwei Polizei</span>
+    <input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/>
+</div>
+<div id="myVideoLoop">
+</div>
+<!-- <div id="html5canloop">
+<p>Seamless loop of audio and video using html5</p>
+<button onclick="change_css();">Reveal the magic</button> <button id="hidden_default" onclick="change_css_back();">Unreveal the magic</button><br />
+</div> -->
+<!-- Scripts -->
+<script src="VideoLoop.js"></script>
+<script>
+
+        window.onload = function() {
+
+                // Initialize video loop
+                videoLoopObj = new VideoLoop('myVideoLoop');
+                videoLoopObj.length = 7351;
+    videoLoopObj.transitionDelay = 20;
+                videoLoopObj.paths = ['ihxtyu.mp4'];
+                videoLoopObj.types = ['video/mp4'];
+                videoLoopObj.init();
+        }
+
+</script>
+
+<script src="yPXnf.js" type="text/javascript"></script>
+  <script>
+
+    loopify("yutmul.flac",ready);
+
+    function ready(err,loop){
+      if (err) {
+        console.warn(err);
+      }
+
+        loop.play();
+    }
+
+  </script>
+
+    <script>
+        function change_css(){
+            document.getElementById('myVideoLoop1').style.cssText = 'position:relative;';
+      document.getElementById('myVideoLoop2').style.cssText = 'position:relative;';
+      document.getElementById('hidden_default').style.cssText = 'visibility: visible;'; 
+        }
+    </script>
+
+    <script>
+        function change_css_back(){
+            document.getElementById('myVideoLoop2').style.cssText = 'position:absolute; z-index: 10000;';
+            document.getElementById('myVideoLoop1').style.cssText = 'position:absolute; z-index: 10001;'; 
+      document.getElementById('hidden_default').style.cssText = 'visibility: hidden;';
+        }
+    </script>
+
+</script>
+
+</body>
+</html>

public/loop/polizei/alt/style.css

@@ -0,0 +1,117 @@
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+* { 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden; 
+}
+
+body {
+	background: black;
+}
+
+#myVideoLoop video { 
+	position: absolute; 
+}
+
+div#myVideoLoop {
+	height: inherit;
+	display: flex;
+	justify-content: center;
+}
+
+div#html5canloop {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    font-weight: bold;
+    padding: 10px;
+    background: #202020;
+}
+
+button#hidden_default {
+	visibility: hidden;
+}
+
+.source_info {
+    color: white;
+    width: inherit;
+    background: #0d0d0d;
+    position: fixed;
+    z-index: 1;
+    padding: 10px;
+}
+
+span#sinfo {
+    padding: 10px;
+    font-style: italic;
+    vertical-align: super;
+}
+
+  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: contain;
+    }
+  }
+
+input#volume {
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+/*******/
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: #0d0d0d;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}
+
+.source_info {
+    vertical-align: super;
+    display: flex;
+    align-items: center;
+}

public/loop/polizei/alt/yPXnf.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+		var gainNode = context.createGain();
+		gainNode.gain.value = -0.8;
+		gainNode.connect(context.destination);
+		source.connect(gainNode);	
+
+		document.getElementById('volume').addEventListener('change', function() {
+    		gainNode.gain.value = this.value;
+		});
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/polizei/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+<style>
+#myVideoLoop video {
+    position: absolute;
+    width: 100%;
+}
+
+  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .source_info {
+    position: absolute;
+    z-index: 99999;
+  }
+</style>
+<script src="videoloop.js"></script>
+</head>
+<body>
+    <div class="source_info">
+    <a href="../index.html"> <- back</a>
+</div>
+<div id="myVideoLoop"></div>
+<script>
+
+    window.onload = function() {
+
+        // Initialize video loop
+        videoLoopObj = new VideoLoop('myVideoLoop');
+        videoLoopObj.transitionDelay = 90; // delay until the second video starts
+        videoLoopObj.length = 7290; // original lenght: 7400ms (07.40s)
+        videoLoopObj.paths = ['gfdgsgds.mp4'];
+        videoLoopObj.types = ['video/mp4'];
+        videoLoopObj.volume = 0.3;
+        videoLoopObj.init();
+    }
+
+</script>
+</body>
+</html>

public/loop/polizei/loopify.js

@@ -0,0 +1,77 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/polizei/videoloop.js

@@ -0,0 +1,135 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 500;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.volume = 0.1;
+		videoObj.id = id + index;
+
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/russians/VideoLoop.js

@@ -0,0 +1,133 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.setAttribute("muted" , "true");
+		videoObj.setAttribute("preload" , "auto");
+		videoObj.id = id + index;
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+			
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/russians/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Eins Zwei Polizei seamless html5 loop</title>
+<link rel="stylesheet" href="style.css"></link>
+</head>
+
+<body>
+
+<div class="source_info">
+	<span>Volume</span> <input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/>
+</div>
+
+<div id="myVideoLoop">
+</div>
+<div id="html5canloop">
+<button onclick="change_css();">Reveal the magic</button> <button id="hidden_default" onclick="change_css_back();">Unreveal the magic</button><br />
+</div>
+<!-- Scripts -->
+<script src="VideoLoop.js"></script>
+<script>
+
+        window.onload = function() {
+
+                // Initialize video loop
+                videoLoopObj = new VideoLoop('myVideoLoop');
+				this.muted = true;
+                videoLoopObj.length = 13550;
+				videoLoopObj.transitionDelay = 10;
+                videoLoopObj.paths = ['fzkpmk.webm'];
+                videoLoopObj.types = ['video/webm'];
+                videoLoopObj.init();
+        }
+
+</script>
+<script src="yPXnf.js" type="text/javascript"></script>
+  <script>
+
+    loopify("fapadt.webm",ready);
+
+    function ready(err,loop){
+      if (err) {
+        console.warn(err);
+      }
+
+        loop.play();
+    }
+
+  </script>
+
+    <script>
+        function change_css(){
+            document.getElementById('myVideoLoop1').style.cssText = 'position:relative; object-fit: contain;padding-bottom: 150px;';
+	    document.getElementById('myVideoLoop2').style.cssText = 'position:relative; object-fit: contain;padding-bottom: 150px;';
+	    document.getElementById('hidden_default').style.cssText = 'visibility: visible;'; 
+        }
+    </script>
+
+    <script>
+        function change_css_back(){
+            document.getElementById('myVideoLoop2').style.cssText = 'position:absolute; z-index: 10000;';
+            document.getElementById('myVideoLoop1').style.cssText = 'position:absolute; z-index: 10001;'; 
+	    document.getElementById('hidden_default').style.cssText = 'visibility: hidden;';
+        }
+    </script>
+
+</body>
+</html>
+

public/loop/russians/style.css

@@ -0,0 +1,143 @@
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+* { 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden; 
+}
+
+body {
+	background: black;
+}
+
+#myVideoLoop video { 
+	position: absolute; 
+}
+
+div#myVideoLoop {
+    width: inherit;
+    height: inherit;
+    display: flex;
+    justify-content: center;
+}
+
+div#html5canloop {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    font-weight: bold;
+    padding: 10px;
+    background: #202020;
+}
+
+button#hidden_default {
+	visibility: hidden;
+}
+
+.source_info {
+    color: white;
+    width: inherit;
+    background: #0d0d0d;
+    padding: 10px;
+}
+
+span#sinfo {
+    padding: 10px;
+    font-style: italic;
+    vertical-align: super;
+}
+
+/*  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: cover;
+    }
+  }*/
+
+input#volume {
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+img#rotation_img {
+    height: 35px;
+    -webkit-animation: rotation 1s infinite linear;
+    float: left;
+    margin-right: 10px;
+}
+
+div#early_alpha {
+    float: left;
+}
+
+a#home {
+    color: chartreuse;
+    font-family: monospace;
+    text-decoration: none;
+    font-style: italic;
+    font-weight: 800;
+}
+
+span#alpha_l00p {
+    vertical-align: super;
+}
+
+@-webkit-keyframes rotation {
+	from {
+	-webkit-transform: rotate(0deg);
+	}
+
+	to {
+	-webkit-transform: rotate(359deg);
+	}
+}
+
+/******* Chrome specific */
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: #0d0d0d;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}

public/loop/russians/yPXnf.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+		var gainNode = context.createGain();
+		gainNode.gain.value = -0.8;
+		gainNode.connect(context.destination);
+		source.connect(gainNode);	
+
+		document.getElementById('volume').addEventListener('change', function() {
+    		gainNode.gain.value = this.value;
+		});
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();

public/loop/shake/VideoLoop.js

@@ -0,0 +1,134 @@
+//
+//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
+//	By Mark Westguard (http://www.westguardsolutions.com)
+//
+
+function VideoLoop(id) {
+
+	var about = {
+
+		Version: 0.1,
+		Author: "Mark Westguard",
+		Created: "09/01/2015",
+		Updated: "09/02/2015"
+	};
+
+	if(id) {
+
+		if(window === this) { return new VideoLoop(id); }
+
+		// Configuration
+		this.length = 1000;			// Precise (as you can) length of video in milliseconds
+		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
+		this.transitionDelay = 0;	// Video transition delay
+		this.paths = [];
+		this.types = [];
+
+		// Variables
+		this.id = id;
+		this.idCurrent = 1;			// Current video playing
+		this.step = 0;				// Loading step
+
+		return this;
+
+	} else {
+
+		return about;
+	}
+}
+
+VideoLoop.prototype = {
+
+	// Initialize
+	init: function() {
+
+		// Create 2 videos
+		for(var i=1; i<=2; i++) {
+
+			this.create(document.getElementById(this.id), this.id, i);
+		}
+	},
+
+	// Check if all checks are complete
+	check: function(obj, id) {
+
+		// Increment video steps
+		obj.step++;
+
+		// When all four conditions are met, start playing video 1
+		if(obj.step == 4) { document.getElementById(id + '1').play(); }
+	},
+
+	play: function(id) {
+
+		// Work out alternate video object
+		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
+		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);
+
+		// Work out video objects
+		obj1 = document.getElementById(id + this.idCurrent);
+		obj2 = document.getElementById(id + idCurrentAlt);
+
+		// Play video (But do not show it yet)
+		obj1.play();
+
+		// ... then after transition delay ...
+		_self = this;
+		setTimeout(function() {
+
+			// Video transition
+			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
+			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
+			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition
+
+			// Set up video 2 ready to play
+			obj2.pause();
+			obj2.currentTime = 0;
+
+		}, this.transitionDelay);
+	},
+
+	create: function(obj, id, index) {
+
+		// Create video object
+		var videoObj = document.createElement('video');
+		videoObj.id = id + index;
+
+		// Create video source(s)
+		for(var i=0; i<this.paths.length; i++) {
+
+			var videoObjSource = document.createElement('source');
+			videoObjSource.src = this.paths[i];
+			videoObjSource.type = this.types[i];
+			videoObj.appendChild(videoObjSource);
+		}
+
+		// On can play through event handler
+		videoObj.oncanplaythrough = this.check(this, id);		// Video step
+
+		// Loaded meta data event handler
+		videoObj.loadedmetadata = this.check(this, id);		// Video step
+
+		// Video playing event handlers
+		videoObj.videoLoopSelf = this;
+		videoObj.videoLoopID = id;
+		videoObj.addEventListener('playing', function(evt) {
+
+			_self = evt.target.videoLoopSelf;
+			id = evt.target.videoLoopID;
+
+			setTimeout(function() {
+
+				_self.play(id);
+
+			}, _self.length);
+
+		}, false);
+
+		// Set initial z-index
+		videoObj.style.zIndex = this.zIndex + (2 - index);
+
+		// Append video to videoloop object
+		obj.appendChild(videoObj);
+	}
+};

public/loop/shake/index.html

@@ -0,0 +1,63 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>Shake, Shake, Shake seamless html5 loop</title>
+<link rel="stylesheet" href="style.css"></link>
+</head>
+
+<body>
+
+<div class="source_info"><a href="../index.html"> <- back</a> <span id="sinfo">KC & The Sunshine Band - Shake, shake, shake</span> <input id="volume" type="range" min="-1" max="0.1" step="0.01" value="-0.8"/></div>
+<div id="myVideoLoop">
+</div>
+<!--<div id="html5canloop">
+<p>Seamless loop of audio and video using html5 made possible by <a href="https://github.com/veltman/loopify">veltman's loopify</a> and <a href="https://github.com/westguard/VideoLoop">westguard's VideoLoop</a></p>
+<button onclick="change_css();">Reveal the magic</button> <button id="hidden_default" onclick="change_css_back();">Unreveal the magic</button><br />
+</div>-->
+<!-- Scripts -->
+<script src="VideoLoop.js"></script>
+
+
+<script src="yPXnf.js" type="text/javascript"></script>
+  <script>
+
+    loopify("bootyshake.flac",ready);
+
+    function ready(err,loop){
+      if (err) {
+        console.warn(err);
+      }
+            loop.play();
+        /*document.getElementById("start").addEventListener("click",function(){
+            videoLoopObj.init();
+            loop.play();
+        });
+*/
+        videoLoopObj = new VideoLoop('myVideoLoop');
+        videoLoopObj.length = 15870;
+        videoLoopObj.paths = ['bootyshake.mp4'];
+        videoLoopObj.types = ['video/mp4'];
+        videoLoopObj.init();
+    }
+
+  </script>
+
+    <script>
+        function change_css(){
+            document.getElementById('myVideoLoop1').style.cssText = 'position:relative; object-fit: contain;';
+	    document.getElementById('myVideoLoop2').style.cssText = 'position:relative; object-fit: contain;';
+	    document.getElementById('hidden_default').style.cssText = 'visibility: visible;'; 
+        }
+    </script>
+
+    <script>
+        function change_css_back(){
+            document.getElementById('myVideoLoop2').style.cssText = 'position:absolute; z-index: 10000;';
+            document.getElementById('myVideoLoop1').style.cssText = 'position:absolute; z-index: 10001;'; 
+	    document.getElementById('hidden_default').style.cssText = 'visibility: hidden;';
+        }
+    </script>
+
+</body>
+</html>

public/loop/shake/style.css

@@ -0,0 +1,117 @@
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
+* { 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden; 
+}
+
+body {
+	background: black;
+}
+
+#myVideoLoop video { 
+	position: absolute; 
+}
+
+div#myVideoLoop {
+	height: inherit;
+	display: flex;
+	justify-content: center;
+}
+
+div#html5canloop {
+    color: white;
+    position: absolute;
+    bottom: 0;
+    font-weight: bold;
+    padding: 10px;
+    background: #202020;
+}
+
+button#hidden_default {
+	visibility: hidden;
+}
+
+.source_info {
+    color: white;
+    width: inherit;
+    background: #0d0d0d;
+    position: fixed;
+    z-index: 1;
+    padding: 10px;
+}
+
+span#sinfo {
+    padding: 10px;
+    font-style: italic;
+    vertical-align: super;
+}
+
+  #myVideoLoop {
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+    overflow: hidden;
+  }
+  #myVideoLoop > video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @media (min-aspect-ratio: 16/9) {
+    #myVideoLoop > video { height: 300%; top: -100%; }
+  }
+  @media (max-aspect-ratio: 16/9) {
+    #myVideoLoop > video { width: 300%; left: -100%; }
+  }
+  @supports (object-fit: cover) {
+    #myVideoLoop > video {
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      object-fit: cover;
+    }
+  }
+
+input#volume {
+    vertical-align: sub;
+    margin-left: 10px;
+}
+
+/*******/
+input[type=range] {
+    height: 31px;
+    -webkit-appearance: none;
+    background: #0d0d0d;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: #f51945;
+    border-radius: 4px;
+    border: 1px solid #f51945;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    background: #1d1c1c;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+    border: 2px solid white;
+    margin-left: 0px;
+}
+
+.source_info {
+    vertical-align: super;
+    display: flex;
+    align-items: center;
+}

public/loop/shake/yPXnf.js

@@ -0,0 +1,87 @@
+(function() {
+
+    function loopify(uri,cb) {
+
+      var context = new (window.AudioContext || window.webkitAudioContext)(),
+          request = new XMLHttpRequest();
+
+      request.responseType = "arraybuffer";
+      request.open("GET", uri, true);
+
+      // XHR failed
+      request.onerror = function() {
+        cb(new Error("Couldn't load audio from " + uri));
+      };
+
+      // XHR complete
+      request.onload = function() {
+        context.decodeAudioData(request.response,success,function(err){
+          // Audio was bad
+          cb(new Error("Couldn't decode audio from " + uri));
+        });
+      };
+
+      request.send();
+
+      function success(buffer) {
+
+        var source;
+
+        function play() {
+
+          // Stop if it's already playing
+          stop();
+
+          // Create a new source (can't replay an existing source)
+          source = context.createBufferSource();
+          source.connect(context.destination);
+
+		var gainNode = context.createGain();
+		gainNode.gain.value = -0.8;
+		gainNode.connect(context.destination);
+		source.connect(gainNode);	
+
+		document.getElementById('volume').addEventListener('change', function() {
+    		gainNode.gain.value = this.value;
+		});
+
+
+          // Set the buffer
+          source.buffer = buffer;
+          source.loop = true;
+
+          // Play it
+          source.start(0);
+
+        }
+
+        function stop() {
+
+          // Stop and clear if it's playing
+          if (source) {
+            source.stop();
+            source = null;
+          }
+
+        }
+
+        cb(null,{
+          play: play,
+          stop: stop
+        });
+
+      }
+
+    }
+
+    loopify.version = "0.1";
+
+    if (typeof define === "function" && define.amd) {
+      define(function() { return loopify; });
+    } else if (typeof module === "object" && module.exports) {
+      module.exports = loopify;
+    } else {
+      this.loopify = loopify;
+    }
+
+})();