§20-01
動画プレイヤー (custom controls)
再生速度・画質・字幕を切り替えられる独自の操作盤を持つ。
再生速度や画質、字幕を利用者が選べ、好みの見方で視聴できる。講義動画や長尺コンテンツで、標準の操作では足りないときに使う。
実装のポイントvideo 要素の標準コントロールを外し、play/pause、timeupdate などのイベントで自前 UI と状態を同期する。全操作をキーボードで扱えるようにし、各ボタンにラベルを付ける。
- 状態管理
§20
メディア（音声・動画）
Media
- Patterns
- 13
- Demos
- 13
§20-02
Picture-in-Picture
動画を小窓に切り離して他の操作中も表示する。
動画を見続けながら別のページや作業に移れる。配信や解説動画のように、見ながら他のことをする使い方が多い場面で使う。
実装のポイントvideo.requestPictureInPicture() で小窓に出し、leavepictureinpicture で UI を戻す。任意の DOM なら Document PiP を使う。
- ブラウザ API
- モック
§20-04
サムネイル preview on hover
シークバーのホバー位置の場面を小さく表示する。
見たい場面を再生せずに探せ、何度も飛ばして戻る手間が減る。長い動画や講義の視聴で効く。
実装のポイントサムネイルは一定間隔のフレームを 1 枚のスプライト画像にまとめ、background-position で切り出す。プレビュー位置は端でバー外にはみ出さないよう clamp する。
- 状態管理
§20-05
Live 配信 indicator
配信中であることを赤い印で示す。
いま配信中かを一目で伝え、録画との区別を付ける。配信一覧やサムネイルに重ねて、今参加できる放送を探しやすくする。
実装のポイントLIVE 表示は配信状態と同期させ、遅延がある場合は「ライブに戻る」操作を併置する。点滅は prefers-reduced-motion 時に止め、色だけでなく文字でも状態を示す。
- CSS のみ
- アニメーション
§20-06
チャット overlay
配信映像の横や上にチャットを重ねて表示する。
視聴者同士のやり取りを映像から目を離さずに追える。ライブ配信やウォッチパーティなど、同時視聴の一体感を出したいときに使う。
実装のポイント利用者が最下部にいるときだけ新着で自動スクロールし、遡って読んでいる間は「新着あり」ボタンに切り替える。流量が多い場合は表示件数に上限を設ける。
- リアルタイム
- モック
§20-07
音声 player (Spotify風)
ジャケット画像と進行バー付きで音声を再生する。
画面を移動しても再生が続く音声体験を作る。ポッドキャストや音楽のように、聴きながら他の操作をする利用に向く。
実装のポイントaudio 要素は再生中も DOM に保持し、画面遷移で途切れないよう上位レイアウトに置く。Media Session API で OS のロック画面や再生キーと連携させる。
- 状態管理
§20-08
Waveform 表示
音声の波形を描き、クリックで再生位置を移す。
無音部分や盛り上がりが視覚的に分かり、目的の箇所に素早く移動できる。録音やポッドキャストの編集・視聴で使う。
実装のポイント波形は decodeAudioData で得たサンプルを区間ごとのピーク値に間引いて描く。クリック位置を currentTime に換算し、role="slider" で矢印キーのシークも受け付ける。
- 状態管理
残り 5 件のパターン字幕生成 / 翻訳 / トランスクリプト追従 (karaoke 風) / シーク thumbnail strip …
§20-10
トランスクリプト追従 (karaoke 風)
再生位置に合わせて文字起こしの該当箇所を強調する。
聞き逃した部分を文字で追え、どこを再生しているかを見失わない。講義や会議の録画、ポッドキャストの閲覧に向く。
実装のポイントtimeupdate で currentTime を受け取り、二分探索で現在の区間を特定してハイライトする。自動スクロールは利用者が手動で動かしている間は止める。
- タイマー
- モック
§20-11
シーク thumbnail strip
動画のフレームを横に並べて目視でシークする。
見た目で場面を探してから移動できるようにする。長い録画や映像素材で、時間指定だけでは目当ての場面に辿り着きにくいときに効く。
実装のポイント横並びのフレームは overflow-x: auto で横スクロールさせ、現在位置のフレームを scrollIntoView で中央に寄せる。画像は loading="lazy" で遅延読み込みする。
- CSS のみ
§20-12
速度コントロール (0.5x-2x)
動画や音声の再生速度を切り替える。
内容に応じて聞き取る速さを選べ、長い講義や会議の録画を短時間で確認できる。聞き直したい箇所は遅くすることもできる。
実装のポイント選んだ値を video.playbackRate に設定し、preservesPitch で音程を保つ。選択状態は aria-pressed で伝え、次回再生時のために値を保存する。
- 状態管理
§20-13
Sleep timer
指定時間が経つと再生を自動で止める。
寝る前に再生を始めても指定時間で止まり、電池や通信量を無駄にしない。音声や動画を就寝時に流す使い方があるアプリに向く。
実装のポイント停止時刻を Date.now() 基準の絶対時刻で保持し、タブが非アクティブで setTimeout が遅れても残り時間を正しく出す。停止直前は音量をフェードアウトさせる。
- タイマー
- 状態管理