73 lines
2.0 KiB
HTML
Executable File
73 lines
2.0 KiB
HTML
Executable File
<!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>
|