サムネイルを表示する

動画内の時刻を指定する専用リンクで、サムネイルを生成できます。

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 フレーム全体を残し、指定サイズの残りを黒で埋める

デフォルトでは、Stream Player は動画の先頭フレームをサムネイルにします。API で thumbnailTimestampPct を設定すると、動画ごとに変更できます。

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 にします。相対値なので、動画の長さが違ってもデフォルトサムネイルを同じ位置にできます。

Stream はサムネイルとしてアニメーション GIF に対応しています。アニメーションサムネイルの表示は、Stream Analytics の課金対象配信分数にも視聴分数にも加算されません。

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

アニメーションサムネイルで使える URL 属性は次のとおりです。

• time (デフォルト 0s) 動画内の時刻。例: 8m、5m2s
• height (デフォルト 640)
• width (デフォルト 640)
• fit (デフォルト crop) 指定した高さと幅が元のアップロードと合わないときの扱い。次のいずれかです:
  • crop 指定サイズに収まらない部分を切り取る
  • clip フレーム全体を残し、指定サイズ内で画像を小さくする
  • scale 指定サイズに合わせて画像を変形する
  • fill フレーム全体を残し、指定サイズの残りを黒で埋める
• duration (デフォルト 5s)
• fps (デフォルト 8)