Reactで、動画のチャプター一覧から好きな場面を再生する方法

export type Chapter = { start: number; title: string };

// いまの再生位置が入っているチャプターの番号。最初のチャプターより前なら -1
export function chapterIndexAt(chapters: Chapter[], time: number): number {
  let index = -1;
  for (let i = 0; i < chapters.length; i++) {
    if (chapters[i].start <= time) index = i;
    else break;
  }
  return index;
}

// 秒を「1:05」の形にする
export function formatTime(seconds: number): string {
  const s = Math.floor(seconds);
  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
}

import { useEffect, useRef, useState } from 'react';
import { type Chapter, chapterIndexAt, formatTime } from './chapters';

type Props = { src: string; chapters: Chapter[]; preload?: 'none' | 'metadata' | 'auto' };

export function VideoChapters({ src, chapters, preload = 'metadata' }: Props) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [time, setTime] = useState(0);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;
    const update = () => setTime(video.currentTime);
    video.addEventListener('timeupdate', update);
    return () => video.removeEventListener('timeupdate', update);
  }, []);

  const playFrom = (start: number) => {
    const video = videoRef.current;
    if (!video) return;
    video.currentTime = start;
    video.play().catch(() => {
      // 再生が許可されなかったときは、場面の移動だけで止めておく
    });
  };

  const active = chapterIndexAt(chapters, time);

  return (
    <div className="player">
      <video ref={videoRef} src={src} controls playsInline preload={preload} />
      <ol className="chapters">
        {chapters.map((chapter, i) => (
          <li key={chapter.start}>
            <button
              type="button"
              aria-current={i === active ? 'true' : undefined}
              onClick={() => playFrom(chapter.start)}
            >
              <span className="time">{formatTime(chapter.start)}</span>
              <span className="title">{chapter.title}</span>
            </button>
          </li>
        ))}
      </ol>
    </div>
  );
}

押した直後のイベント ["seeking 12.000","play 12.000","timeupdate 12.008","seeked 12.008","playing 12.008"]
playing のあと {"currentTime":12.03,"paused":false,"readyState":4,"active":2}
1秒後 {"currentTime":13.032,"paused":false,"readyState":4,"active":2}

timeupdate の回数（16秒から18.5秒） 9
間隔 ms 最小 265 最大 266 平均 266
「できあがり」に変わったときの currentTime 18.117

押す前 {"currentTime":0,"paused":true,"readyState":0,"active":0}
押して1.5秒後 {"currentTime":13.49,"paused":false,"readyState":4,"active":2}

seekable [[0,0]]
押して1.5秒後 {"currentTime":1.506,"paused":false,"readyState":4,"active":0}
さらに3秒後の seekable [[0,0]] buffered [[0,24]]
全体を読み込んだあとにもう一度押して1秒後 {"currentTime":1.002,"paused":false,"readyState":4,"active":0}
（比べるため）Range に応えるサーバーの seekable [[0,24]]

WEBVTT

00:00:00.000 --> 00:00:06.000
オープニング

00:00:06.000 --> 00:00:12.000
材料をそろえる

00:00:12.000 --> 00:00:18.000
組み立てる

00:00:18.000 --> 00:00:24.000
できあがり

{"attrs":"(なし)","mode":"disabled","readyState":0,"cues":null}
{"attrs":"default","mode":"showing","readyState":2,"cues":4}

import { type RefObject, useEffect, useState } from 'react';
import type { Chapter } from './chapters';

// <track kind="chapters"> の WebVTT を読み、チャプターの配列にする
export function useChapterTrack(trackRef: RefObject<HTMLTrackElement | null>): Chapter[] {
  const [chapters, setChapters] = useState<Chapter[]>([]);

  useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    const track = el.track;
    // disabled のままだと、ブラウザはファイルを読み込まない
    if (track.mode === 'disabled') track.mode = 'hidden';

    const read = () => {
      setChapters(
        Array.from(track.cues ?? [], (cue) => ({
          start: cue.startTime,
          title: (cue as VTTCue).text,
        })),
      );
    };
    if (el.readyState === HTMLTrackElement.LOADED) read();
    el.addEventListener('load', read);
    return () => el.removeEventListener('load', read);
  }, [trackRef]);

  return chapters;
}

const videoRef = useRef<HTMLVideoElement>(null);
const trackRef = useRef<HTMLTrackElement>(null);
const chapters = useChapterTrack(trackRef);

// ...

<video ref={videoRef} src={src} controls playsInline preload="metadata">
  <track ref={trackRef} kind="chapters" src={vtt} srcLang="ja" label="チャプター" />
</video>

一覧 ["0:00オープニング","0:06材料をそろえる","0:12組み立てる","0:18できあがり"]
track {"mode":"hidden","readyState":2}
「できあがり」を押して0.8秒後 {"currentTime":18.801,"paused":false}