97 lines
2.0 KiB
HTML
97 lines
2.0 KiB
HTML
|
<!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>
|