<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,width=device-width">
</head>
<body>
<style>
#canvas-bg {
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: -1;
}
</style>
<script>
(function() {
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var video = document.createElement("video");
video.autoplay = true;
video.muted = true;
video.loop = true;
video.src = "https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4";
video.oncanplay = function() {
video.oncanplay = null;
video.play();
loop(0);
};
canvas.id = "canvas-bg";
function loop(time) {
var p = time % 30000 / 30000;
var ρ = canvas.height / video.videoHeight;
var videoWidth = ρ * video.videoWidth;
var videoHeight = ρ * video.videoHeight;
var x = -p * videoWidth;
context.clearRect(0, 0, canvas.width, canvas.height);
while(x < canvas.width) {
context.drawImage(video, x, 0, videoWidth, videoHeight);
x += videoWidth;
}
requestAnimationFrame(loop);
}
function onresize() {
canvas.width = innerWidth;
canvas.height = innerHeight;
};
onresize();
addEventListener("resize", onresize);
document.documentElement.appendChild(canvas);
})();
</script>
</body>
</html>