スプライトシート

ショートフォーム動画の開始

ショートフォーム動画のパラメータを有効にするには fm=mp4 を設定する必要があります。

Imgix Videoはスプライトシート（動画からサンプリングされたフレームを含む単一のグリッド画像）と、タイムスタンプをその画像の領域にマッピングするWebVTTファイルを生成できます。これらを組み合わせることで、ビデオプレイヤーのタイムラインホバープレビュー機能を実現します。

動画URLにfm=vttを指定してリクエストします。Imgixはスプライトシート画像と各フレームサムネイルのピクセル座標を参照するWebVTTファイルを返します。
ビデオプレイヤーはVTTファイルを取得し、ユーザーがタイムラインをスクラブする際に正しいサムネイルを表示します。
スプライトシート画像自体は、fm=vttの代わりにfm=spritesheetを使用した同じURLで配信されます。プレイヤーは通常、VTTを解析した後に自動的にこれをリクエストします。

https://assets.imgix.net/videos/big_buck_bunny_1080p_h264.mov?fm=vtt

このURLをビデオプレイヤーのサムネイルトラックに指定します。他のパラメータは必要ありません。Imgixがインターバル、列数、フレームサイズに適切なデフォルト値を選択します。

video-spritesheet-*パラメータを使用してスプライトシートの生成方法を制御できます：

ユースケース

スプライトシートは、動画コンテンツを強化しユーザーエンゲージメントを向上させるさまざまなアプリケーションで活用できる汎用性の高いツールです。以下に代表的なユースケースを紹介します。

トリックプレイにより、ユーザーはシーク中にサムネイルプレビューを表示しながら動画コンテンツを視覚的にナビゲートできます。この機能は以下の点でユーザー体験を大幅に向上させます。

fm=vtt形式は、主要なビデオプレイヤーでのトリックプレイ実装に最適です。プレイヤーのサムネイルトラックにfm=vttを付けた動画URLを指定するだけで、プレイヤーがスプライトシートの座標を自動的に解析し、シークバー上にフレームプレビューを表示します。

ix-elementsはビデオプレイヤー内にトリックプレイ機能を内蔵しています。ユーザーフレンドリーなビデオプレイヤーの作成についてはこちらの記事をご覧ください。

スプライトシートは、動画コンテンツの視覚的なサマリーを提供することでコンテンツレビューのプロセスを効率化できます。例えば、アップロード時にSlackで通知する場合、スプライトシートを使って動画コンテンツの概要を視覚的に伝えることができます。

fm=spritesheetを使用してスプライトシート画像全体を取得し、通知やコンテンツダッシュボード、モデレーションツールに埋め込むことができます。

スプライトシートはサムネイルピッカーインターフェースの自動化に役立ち、コンテンツクリエイターや管理者が動画サムネイルとして最適なフレームを選択できるようにします。

fm=vttファイルを取得して各フレームのスプライトシート座標を解析し、スプライトシート画像と組み合わせることで、カスタムのサムネイルピッカーを構築できます。

Loading spritesheet data...

動画編集者やプロデューサーは、編集プロセスでスプライトシートをリファレンス素材として活用できます。

fm=spritesheet形式は、1つの画像ファイルで包括的な視覚リファレンスを提供するため、この目的に特に適しています。