本文へ移動

§20-01Media

動画プレイヤー (custom controls)

再生速度・画質・字幕を切り替えられる独自の操作盤を持つ。

再生速度や画質、字幕を利用者が選べ、好みの見方で視聴できる。講義動画や長尺コンテンツで、標準の操作では足りないときに使う。

実装のポイント

video 要素の標準コントロールを外し、play/pause、timeupdate などのイベントで自前 UI と状態を同期する。全操作をキーボードで扱えるようにし、各ボタンにラベルを付ける。

特徴
  • 状態管理
デモで使っているもの
  • lucide-react
  • SVG
  • Fullscreen API

このパターンが効く目的