single-video/react HLS

One film that loads from the first moment, a play button, metrics

examples/single-video/react/App.tsx

import { configure, preload, useVideo, Video } from "@uln/hls/react";
import { film } from "../../films";
import { track } from "../../track";

configure({ onMetric: track });

// Start loading before React has rendered anything.
preload(film.hls);

export function App() {
  const player = useVideo();

  return (
    <main>
      <Video src={film.hls} poster={film.poster} player={player} className="film" />
      {/* Always tappable: play() starts as soon as it can. */}
      {player.status !== "playing" && (
        <button type="button" onClick={player.play}>
          Play
        </button>
      )}
      {player.buffering && <p>Loading…</p>}
      {/* play() after an error retries. */}
      {player.status === "error" && <p>This film could not be loaded. Tap play to try again.</p>}
    </main>
  );
}