html5-video-slidepuzzle/prototype.html

97 lines
2.0 KiB
HTML
Raw Normal View History

2024-06-21 16:04:10 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
position: relative;
width: 480px;
height: 480px;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
#video {
display: none;
position: absolute;
top: 0;
left: 0;
width: 480px;
height: 480px;
}
#slice {
position: absolute;
border: 2px solid lightblue;
/* box-sizing: border-box; */
}
#slicediv {
position: relative;
}
#slicediv span {
position: absolute;
color: white;
z-index: 1;
}
</style>
<script>
"use strict";
function sliceVideo() {
var video = document.getElementById("video");
var canvas = document.getElementById("slice");
var context = canvas.getContext("2d");
var cw = canvas.width = 120;
var ch = canvas.height = 120;
var sourceX = 100;
var sourceY = 100;
var framerate = 15;
var delay = 1000 / framerate;
context.drawImage(video, sourceX, sourceY, cw, ch, 0, 0, cw, ch);
window.setTimeout(sliceVideo, delay);
}
function moveRight(distance, time) {
var slice = document.getElementById("slicediv");
console.log("about to move " + distance +"px in " + time + "ms");
var framerate = 15;
var delay = 1000 / framerate;
var frameCount = Math.round(time / delay);
var step = distance / frameCount;
var setMove = function(framesLeft) {
console.log(framesLeft + " frames left");
console.log(slice.style.left);
if (framesLeft > 0) {
window.setTimeout(function() {
slice.style.left = (slice.offsetLeft + step) + "px";
setMove(framesLeft - 1);
}, delay);
}
}
setMove(frameCount);
}
document.addEventListener("DOMContentLoaded", function() {
sliceVideo();
});
</script>
</head>
<body>
<video id="video" src="video/plasmacropped.mp4" autoplay loop>
Video not working! Everything is probably Microsoft's fault!
</video>
<div class="container">
<div id="slicediv" >
<span>Click me!</span>
<canvas id="slice" onclick="moveRight(200, 800)"></canvas>
</div>
</div>
</body>
</html>