single-video/vanilla HLS

The same page without React

examples/single-video/vanilla/main.ts

import { createPlayer, preload } from "@uln/hls";
import { film } from "../../films";

preload(film.hls);

const video = document.getElementById("film") as HTMLVideoElement;
const button = document.getElementById("play") as HTMLButtonElement;
const status = document.getElementById("status") as HTMLParagraphElement;

const player = createPlayer();
player.attach({ video, src: film.hls, poster: film.poster });
button.addEventListener("click", () => player.play());

player.subscribe((state) => {
  button.hidden = state.status === "playing";
  status.textContent = state.status === "error" ? "This film could not be loaded." : state.buffering ? "Loading…" : "";
});