§20-01Media
動画プレイヤー (custom controls)
再生速度・画質・字幕を切り替えられる独自の操作盤を持つ。
再生速度や画質、字幕を利用者が選べ、好みの見方で視聴できる。講義動画や長尺コンテンツで、標準の操作では足りないときに使う。
実装のポイント
video 要素の標準コントロールを外し、play/pause、timeupdate などのイベントで自前 UI と状態を同期する。全操作をキーボードで扱えるようにし、各ボタンにラベルを付ける。
- 特徴
- 状態管理
- デモで使っているもの
- lucide-react
- SVG
- Fullscreen API