forked from ShatteredDisk/rickroll
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
28 lines (27 loc) · 876 Bytes
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<div id="theater">
<video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video>
<canvas id="canvas"></canvas>
<label>
<br />Try to play me :)</label>
<br />
</div>
</body>
</html>
<script>
let animation_handle;
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");
video.addEventListener('loadeddata', video_load_callback, false);
function video_load_callback() {
video.cancelVideoFrameCallback(animation_handle);
step()
}
function step() { // update the canvas when a video proceeds to next frame
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
animation_handle = video.requestVideoFrameCallback(step);
}
</script>