chunk_player.html

<!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>