コンテンツにスキップ

サムネイルの表示

ストリームサムネイルは、非正方形ピクセルの動画には対応していません。

ユースケース 1: サムネイルをオンザフライで生成する

動画からサムネイルを生成するには、サムネイルを取得したい動画の時間を指定する特別なリンクを使用します。

https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg?time=1s&height=270

例として生成されたサムネイル画像

埋め込みURLの poster クエリパラメータを使用すると、動画の任意の時間にサムネイルを設定できます。署名付きURLが必要な場合は、動画UIDの代わりに署名付きURLを使用する必要があります。

<iframe
  src="https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/iframe?poster=https%3A%2F%2Fcustomer-f33zs165nr7gyfy4.cloudflarestream.com%2F6b9e68b07dfee8cc2d116e4c51d6a957%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
  style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
  allowfullscreen="true"
></iframe>

サポートされているURL属性は次のとおりです：

  • time (デフォルト 0s, 設定可能) 動画からの時間例: 8m, 5m2s
  • height (デフォルト 640)
  • width (デフォルト 640)
  • fit (デフォルト crop) 要求された高さと幅が元のアップロードと一致しない場合の処理方法を明確にするため、次のいずれかである必要があります：
    • crop 指定されたサイズに収まらない動画の部分をカット
    • clip フレーム全体を保持し、指定されたサイズ内で画像のサイズを減少
    • scale 画像を指定されたサイズに合わせて歪める
    • fill フレーム全体を保持し、要求されたサイズの残りを黒い背景で埋める

ユースケース 2: APIを使用してデフォルトのサムネイルタイムスタンプを設定する

デフォルトでは、ストリームプレーヤーは動画の最初のフレームをサムネイルに設定します。APIを使用して “thumbnailTimestampPct” 値を設定することで、動画ごとにこれを変更できます：

Terminal window
curl -X POST \
-H "Authorization: Bearer <API_TOKEN>" \
-d '{"thumbnailTimestampPct": 0.5}' \
https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/stream/<VIDEO_UID>

thumbnailTimestampPct は、0.0（動画の最初のフレーム）から1.0（動画の最後のフレーム）までの値です。たとえば、サムネイルを動画の中間地点のフレームにしたい場合、thumbnailTimestampPct 値を0.5に設定できます。このように相対値を使用することで、動画の長さが異なる場合でもデフォルトのサムネイルを設定できます。

ユースケース 3: アニメーションサムネイルの生成

ストリームはアニメーションGIFをサムネイルとしてサポートしています。アニメーションサムネイルの表示は、ストリーム分析で請求された分数や視聴された分数にはカウントされません。

アニメーションGIFサムネイル

https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.gif?time=1s&height=200&duration=4s

Cloudflare Streamからオンデマンドで生成されたアニメーションGIFの例

アニメーションサムネイルのサポートされているURL属性は次のとおりです：

  • time (デフォルト 0s) 動画からの時間例: 8m, 5m2s
  • height (デフォルト 640)
  • width (デフォルト 640)
  • fit (デフォルト crop) 要求された高さと幅が元のアップロードと一致しない場合の処理方法を明確にするため、次のいずれかである必要があります：
    • crop 指定されたサイズに収まらない動画の部分をカット
    • clip フレーム全体を保持し、指定されたサイズ内で画像のサイズを減少
    • scale 画像を指定されたサイズに合わせて歪める
    • fill フレーム全体を保持し、要求されたサイズの残りを黒い背景で埋める
  • duration (デフォルト 5s)
  • fps (デフォルト 8)
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings