このトピックでは、Intelligent Media Management (IMM) のメディアトランスコード機能を使用してビデオスプライトを生成する方法について説明します。
機能紹介
ビデオスプライト生成とは、ビデオの複数のキーフレームをサムネイル形式の単一の画像に結合する手法です。 スプライトを生成することで、ユーザーは 1 つの画像でビデオのさまざまなシーンをすばやく閲覧できるため、視聴するコンテンツをより効果的に選択できます。

シナリオ
ビデオプレビューとコンテンツナビゲーション: スプライトは、ユーザーにビデオコンテンツのクイックプレビューを提供し、ビデオのキーフレームを明確に閲覧し、関心のある部分を簡単に選択できるようにします。
ビデオプレイリスト: プレイリストでは、スプライトを使用して各ビデオのサムネイルを表示できます。これにより、リストインターフェイス全体がより簡潔で視覚的に魅力的になり、ユーザーエクスペリエンスが向上します。
ソーシャルメディア共有: ソーシャルメディアでビデオを共有する場合、スプライトをカバー画像として使用できます。これにより、ユーザーはビデオコンテンツをすばやく理解できるようになり、クリック率と視聴回数を向上させることができます。
ライブストリーミングとイベント再生: ライブイベントのブロードキャストまたは録画コンテンツの再生では、スプライトは視聴者が関心のあるハイライトをすばやく見つけるのに役立ち、視聴の利便性を高めます。
サポートされているオーディオおよびビデオ形式
カテゴリ | 形式 |
オーディオ | AAC、MP3、WAV、FLAC、WMA、AC3、Opus など、主要なオーディオ形式。 |
ビデオ | MP4、MPEG-TS、MKV、MOV、AVI、FLV、M3U8、WebM、WMV、RM、VOB など、主要なビデオ形式。 |
手順
前提条件
AccessKey ペアが作成されていること。 詳細については、「AccessKey ペアを作成する」をご参照ください。
Object Storage Service (OSS) がアクティブ化され、バケットが作成されていること。 詳細については、「バケットを作成する」をご参照ください。
IMM がアクティブ化されていること。 詳細については、「IMM をアクティブ化する」をご参照ください。
IMM コンソールでプロジェクトが作成されます。詳細については、「プロジェクトを作成する」をご参照ください。
説明CreateProject オペレーションを呼び出して、プロジェクトを作成できます。
ListProjects オペレーションを呼び出して、指定したリージョン内のすべてのプロジェクト情報を一覧表示できます。
ステップ 1: ファイルをアップロードする
OSS コンソール を使用して、IMM プロジェクトと同じリージョン内のバケットにメディアファイルをアップロードします。

ステップ 2: IMM を使用してビデオスプライトを生成する
CreateMediaConvertTask 操作を呼び出して、ビデオスプライト生成タスクを作成します。
パラメーター例
ビデオスプライトを生成するプロセスには、通常、次の手順が含まれます。
ビデオフレームの抽出: ビデオから選択したキーフレームを抽出します。
画像処理: 抽出したフレームのサイズ変更と変換を行い、一貫性を維持し、出力要件を満たします。
スプライト生成: 処理されたフレームをグリッド状に配置し、単一の画像にマージしてスプライトを形成します。
次の例では、IMM プロジェクト test-project とファイル oss://test-bucket/video-demo/酿酒.mov を使用してビデオスプライトを生成します。
メディア処理機能と使用方法の詳細については、「メディアトランスコード」をご参照ください。
OpenAPI Explorer を使用して、メディアトランスコード操作でビデオファイルを処理できます。 SDK コードを参照できます。
ビデオスプライト生成の場合は、Target.URI パラメーターと Target.Container パラメーターを設定しないでください。
複数のスプライト画像が生成されます。正確な数は、サブ画像の数とスプライトの行と列の構成によって異なります。
スプライト出力 URI は、「oss://bucket/objectPrefix-{index}.{autoext}」の形式で構成することをお勧めします。 index 変数が設定されていない場合、スプライト画像が互いに上書きされる可能性があります。 関連変数については、「TargetURI テンプレート」をご参照ください。
ビデオ全体から 2 秒ごとにフレームをキャプチャしてスプライトを生成する
ビデオ全体から 2 秒ごとにフレームをキャプチャしてスプライトを生成します。各スプライトは 3 x 3 のグリッドレイアウトで、サブ画像の解像度は 200 x 150 です。

トランスコード情報
形式: JPG
フレームキャプチャ間隔: 2 秒
スプライトサブ画像レイアウト: 3 x 3
単一サブ画像の解像度: 200 x 150
サブ画像間のパディング (Pad): 0
サブ画像とスプライトエッジ間のマージン (Margin): 0
サブ画像のスケーリング方法: スケールとトリミング
出力ファイルの保存パス:
oss://test-bucket/video-demo/sprites-%d.jpgフレームキャプチャ完了通知: MNS メッセージを MNS トピック「test-mns-topic」に送信する
SDK の例については、OpenAPI Explorer をご参照ください。 パラメーター例は自動的に入力されています。デバッグ前に必要に応じて変更できます。
リクエストパラメーター
{
"ProjectName": "test-project",
"Notification": {
"MNS": {
"TopicName": "test-mns-topic"
}
},
"Sources": [
{
"URI": "oss://test-bucket/video-demo/酿酒.mov" // ソースビデオファイルの URI
}
],
"Targets": [
{
"Image": {
"Sprites": [
{
"Format": "jpg", // スプライト画像の形式
"Interval": 2, // フレームキャプチャ間隔(秒)
"Margin": 0, // スプライトエッジとサブ画像間のマージン(ピクセル)
"Pad": 0, // サブ画像間のパディング(ピクセル)
"ScaleHeight": 150, // サブ画像の高さ(ピクセル)
"ScaleType": "crop", // スケーリング方法。crop はスケールしてトリミングすることを意味します。
"ScaleWidth": 200, // サブ画像の幅(ピクセル)
"TileHeight": 3, // スプライトの行数
"TileWidth": 3, // スプライトの列数
"URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}" // 出力スプライト画像の URI
}
]
}
}
]
}ビデオの 5 秒から 30 秒の部分から 2 秒ごとにフレームをキャプチャしてスプライトを生成する
ビデオの 5 秒から 30 秒の部分から 2 秒ごとにフレームをキャプチャしてスプライトを生成します。各スプライトは 3 x 5 のグリッドレイアウトで、サブ画像の寸法はソースビデオの 1/10 です。

トランスコード情報
形式: JPG
フレームキャプチャ開始時刻: 5 秒
フレームキャプチャ期間: 25 秒
フレームキャプチャ間隔: 2 秒
スプライトサブ画像レイアウト: 3 x 5
単一サブ画像の解像度: ソースビデオの 1/10
サブ画像間のパディング (Pad): 4
サブ画像とスプライトエッジ間のマージン (Margin): 5
サブ画像のスケーリング方法: 黒枠を保持せずにスケーリング
出力ファイルの保存パス:
oss://test-bucket/video-demo/sprites-%d.jpgフレームキャプチャ完了通知: MNS メッセージを MNS トピック「test-mns-topic」に送信する
SDK の例については、OpenAPI Explorer をご参照ください。 パラメーター例は自動的に入力されています。デバッグ前に必要に応じて変更できます。
リクエストパラメーター
{
"ProjectName": "test-project", // プロジェクト名
"Notification": {
"MNS": {
"TopicName": "test-mns-topic" // MNS トピック名
}
},
"Sources": [
{
"Duration": 25, // フレームキャプチャ期間(秒)
"StartTime": 5, // フレームキャプチャ開始時刻(秒)
"URI": "oss://test-bucket/video-demo/酿酒.mov" // ソースビデオファイルの URI
}
],
"Targets": [
{
"Image": {
"Sprites": [
{
"Format": "jpg", // スプライト画像の形式
"Interval": 2, // フレームキャプチャ間隔(秒)
"Margin": 5, // スプライトエッジとサブ画像間のマージン(ピクセル)
"Pad": 4, // サブ画像間のパディング(ピクセル)
"ScaleHeight": 0.1, // ソースビデオの高さに対するサブ画像の高さの比率
"ScaleType": "fit", // スケーリング方法。fit は黒枠を保持せずにスケーリングすることを意味します。
"ScaleWidth": 0.1, // ソースビデオの幅に対するサブ画像の幅の比率
"TileHeight": 5, // スプライトの行数
"TileWidth": 3, // スプライトの列数
"URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}" // 出力スプライト画像の URI
}
]
}
}
]
}数量に基づいて均等にフレームをキャプチャしてスプライトを生成する
DetectMediaMeta 操作を使用して、数量に基づいて均等にフレームをキャプチャしてスプライトを生成します。
ステップ 1: ビデオの再生時間情報を取得する
DetectMediaMeta 操作を呼び出して、ビデオの再生時間情報を取得します。 SDK の例については、OpenAPI Explorer をご参照ください。 パラメーター例は自動的に入力されています。デバッグ前に必要に応じて変更できます。
リクエストパラメーター
{
"ProjectName": "test-project", // プロジェクト名
"SourceURI": "oss://test-bucket/video-demo/酿酒.mov" // ソースビデオファイルの URI
}レスポンスパラメーター (ビデオの再生時間である Duration を取得します)
{
// ... (その他のメタデータ情報)
"Duration": 31.64, // ビデオの再生時間(秒)
// ... (その他のメタデータ情報)
}ステップ 2: ビデオの再生時間に基づいて均等にフレームをキャプチャしてスプライトを生成する
ビデオの再生時間は 31.64 秒です。 9 つのサブ画像を均等にキャプチャするには、フレームキャプチャ間隔は 31.64 / (9 - 1) = 3.955 秒です。 スプライトサブ画像レイアウトは 3 x 3 で、サブ画像の寸法はソースビデオの 1/10 です。
トランスコード情報
形式: JPG
フレームキャプチャ間隔: 3.955 秒
スプライトサブ画像レイアウト: 3 x 3
単一サブ画像の解像度: ソースビデオの 1/10
サブ画像間のパディング (Pad): 4
サブ画像とスプライトエッジ間のマージン (Margin): 5
サブ画像のスケーリング方法: スケールとトリミング
出力ファイルの保存パス:
oss://test-bucket/video-demo/sprites-%d.jpgフレームキャプチャ完了通知: MNS メッセージを MNS トピック「test-mns-topic」に送信する
SDK の例については、OpenAPI Explorer をご参照ください。 パラメーター例は自動的に入力されています。デバッグ前に必要に応じて変更できます。
リクエストパラメーター
{
"ProjectName": "test-project", // プロジェクト名
"Notification": {
"MNS": {
"TopicName": "test-mns-topic" // MNS トピック名
}
},
"Sources": [
{
"URI": "oss://test-bucket/video-demo/酿酒.mov" // ソースビデオファイルの URI
}
],
"Targets": [
{
"Image": {
"Sprites": [
{
"Format": "jpg", // スプライト画像の形式
"Interval": 3.955, // フレームキャプチャ間隔(秒)
"Margin": 5, // スプライトエッジとサブ画像間のマージン(ピクセル)
"Pad": 4, // サブ画像間のパディング(ピクセル)
"ScaleHeight": 0.1, // ソースビデオの高さに対するサブ画像の高さの比率
"ScaleType": "fit", // スケーリング方法。 fit は黒枠を保持せずにスケーリングすることを意味します。
"ScaleWidth": 0.1, // ソースビデオの幅に対するサブ画像の幅の比率
"TileHeight": 3, // スプライトの行数
"TileWidth": 3, // スプライトの列数
"URI": "oss://test-bucket/video-demo/sprites-{index}.{autoext}" // 出力スプライト画像の URI
}
]
}
}
]
}