-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_video.html
58 lines (50 loc) · 1.83 KB
/
index_video.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<!-- https://stackoverflow.com/questions/18114349/html5-canvas-smooth-scroll-tilemap -->
<head>
<script type="text/javascript">
window.onload=function() {
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var size = 64;
function fillPattern(img, w, h) {
//draw once
ctx.drawImage(img, 0, 0, w, h);
while (w < canvas.width) {
ctx.drawImage(canvas, w, 0);
w *= 2;
}
while (h < canvas.height) {
ctx.drawImage(canvas, 0, h);
h *= 2;
}
}
function loop() {
if (video1) fillPattern(video1, size * 1.3, size);
requestAnimationFrame(loop);
}
change.onchange = function (e) {
size = this.value;
}
loop();
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=400></canvas>
<input id="change" type=range min=4 max=500 value=64/>
<video id="video1" width="420" autoplay=true loop=true style="display:none;">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
<!-- USE CHROME TO SEE THE SLIDER AT THE BOTTOM -->