§20-04Media
サムネイル preview on hover
シークバーのホバー位置の場面を小さく表示する。
見たい場面を再生せずに探せ、何度も飛ばして戻る手間が減る。長い動画や講義の視聴で効く。
実装のポイント
サムネイルは一定間隔のフレームを 1 枚のスプライト画像にまとめ、background-position で切り出す。プレビュー位置は端でバー外にはみ出さないよう clamp する。
- 特徴
- 状態管理
- デモで使っているもの
- lucide-react
- Pointer Events
§20-04Media
シークバーのホバー位置の場面を小さく表示する。
見たい場面を再生せずに探せ、何度も飛ばして戻る手間が減る。長い動画や講義の視聴で効く。
サムネイルは一定間隔のフレームを 1 枚のスプライト画像にまとめ、background-position で切り出す。プレビュー位置は端でバー外にはみ出さないよう clamp する。