§20-11Media

シーク thumbnail strip

動画のフレームを横に並べて目視でシークする。

見た目で場面を探してから移動できるようにする。長い録画や映像素材で、時間指定だけでは目当ての場面に辿り着きにくいときに効く。

実装のポイント

横並びのフレームは overflow-x: auto で横スクロールさせ、現在位置のフレームを scrollIntoView で中央に寄せる。画像は loading="lazy" で遅延読み込みする。