File size: 1,215 Bytes
f4f2ab3 | 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 | <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chunk Video Player</title>
<style>
html,body{margin:0;background:#000;color:#fff;font-family:Arial}
.wrap{max-width:1100px;margin:auto;padding:20px}
video{width:100%;height:auto;background:#000}
small{color:#aaa}
</style>
</head>
<body>
<div class="wrap">
<h2>Chunk / Range Video Player</h2>
<video id="player" controls preload="none" playsinline></video>
<p><small>The video source is attached only when Play is pressed. The browser then requests byte ranges from the server.</small></p>
<button id="play">Play video</button>
</div>
<script>
const player = document.getElementById("player");
const button = document.getElementById("play");
// Example:
// /video/local/my-folder/movie.mp4
const VIDEO_URL = "/video/local/CHANGE-THIS-TO-YOUR-VIDEO.mp4";
let attached = false;
function attach() {
if (attached) return;
attached = true;
player.src = VIDEO_URL;
player.load();
}
button.addEventListener("click", async () => {
attach();
try { await player.play(); } catch(e) { console.log(e); }
});
player.addEventListener("play", attach);
</script>
</body>
</html>
|