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
This commit is contained in:
noxy
134
public/loop/flowering_nights/VideoLoop.js
Normal file
134
public/loop/flowering_nights/VideoLoop.js
Normal file
@@ -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);
|
||||
}
|
||||
};
|
||||
72
public/loop/flowering_nights/index.html
Normal file
72
public/loop/flowering_nights/index.html
Normal file
@@ -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>
|
||||
BIN
public/loop/flowering_nights/nacht6.mp4
Normal file
BIN
public/loop/flowering_nights/nacht6.mp4
Normal file
Binary file not shown.
BIN
public/loop/flowering_nights/nacht6.ogg
Normal file
BIN
public/loop/flowering_nights/nacht6.ogg
Normal file
Binary file not shown.
117
public/loop/flowering_nights/style.css
vendored
Normal file
117
public/loop/flowering_nights/style.css
vendored
Normal file
@@ -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;
|
||||
}
|
||||
87
public/loop/flowering_nights/yPXnf.js
Normal file
87
public/loop/flowering_nights/yPXnf.js
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user