64 lines
2.2 KiB
HTML
Executable File
64 lines
2.2 KiB
HTML
Executable File
|
|
<!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>
|