動画プレビュー（VTTサムネイル/スプライト）設計と実装
シーク時のプレビューは体感を大きく左右します。重い個別画像を大量に読ませるのではなく、VTT + スプライトで“1枚の画像から座標を切り出す”方式にすれば、往復を抑えつつ安定して速い体験を提供できます。
先に結論
要点（TL;DR）
背景：高速プレビューは“滞留”を減らす
プレビューの反応が遅いと、ユーザーはシークをためらい目的区間にたどり着けません。スプライト方式はネットワーク往復を減らし、安定して一貫した反応を保証しやすくなります。
設計：抽出→スプライト→VTT→配信→UI→計測
実装：VTTとHTMLの最小例
1) WEBVTT（xywh）
WEBVTT
00:00:00.000 --> 00:00:02.000
thumbnails.jpg#xywh=0,0,160,90
00:00:02.000 --> 00:00:04.000
thumbnails.jpg#xywh=160,0,160,90
00:00:04.000 --> 00:00:06.000
thumbnails.jpg#xywh=320,0,160,902) HTMLの track 追加
<!-- プレーヤーにメタデータトラックを追加（プラグインが VTT を解釈） -->
<video id="player" controls preload="metadata" poster="/poster.jpg">
<source src="/video/stream.m3u8" type="application/x-mpegURL" />
<track kind="metadata" src="/thumbs/thumbnails.vtt" label="プレビュー" default>
</video>3) 配信ヘッダの例
# 配信・キャッシュ（例）
# スプライト画像：内容はビルドで固定 → 1年 + immutable
Cache-Control: public, max-age=31536000, immutable
# VTT：準静的 → ユーザー短命/共有長命 + SWR
Cache-Control: public, max-age=300, s-maxage=86400, stale-while-revalidate=600互換性とフォールバック
- 主要ブラウザ+モバイルで
trackは広く対応。プレビュー表示はプレーヤー依存のため実機検証を。 - プレーヤー未対応環境では、固定プレビュー/近傍サムネイルの簡易実装で代替。
- DRM/署名配信でもスプライトは独立レイヤーとして運用可能。
NG/落とし穴
- 解像度過大 — モバイルで帯域浪費。160〜240pxが基準。
- 座標ズレ — 余白や列数変更でxywhが不整合。生成とVTTを同一パラメータで作る。
- 長寿命+無版 — immutable なのにバージョンなし。
公開前チェックリスト
- 密度 — 1〜2秒/サムネ、UIに適合する解像度。
- キャッシュ — 画像=immutable（バージョン付き）、VTT=SWR。
- UI — キーボード操作/フォーカス可視、重複リクエストなし。
- 計測 — TTFB/成功率/離脱をダッシュボード化。
まとめ
VTTサムネイル/スプライトは、軽さと速さを両立する現実解です。配信/キャッシュ/保護とあわせて“最小で速い”設計にまとめ、メトリクスで効果を継続確認しましょう。
FAQ