![Cloudflare Streamで動画のサムネイルを表示してみた [Animated GIFにも対応]](https://devio2023-media.developers.io/wp-content/uploads/2020/06/cloudflare-1200x630-1.jpg)
Cloudflare Streamで動画のサムネイルを表示してみた [Animated GIFにも対応]
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
清水です。Cloudflareの動画配信プラットフォームのサービスCloudflare Streamで動画のサムネイルを表示する方法を確認してみたのでまとめてみたいと思います。通常の1枚のJPEG画像でサムネイルを生成するほか、アニメーションGIFでのサムネイル生成にも対応しています。なお、サムネイルの生成対象はすでにCloudflare Streamにアップロード済みのVODコンテンツを対象に行いました。以下Cloudflare Streamのドキュメントを参考に進めます。
JPEG画像のサムネイルを生成する
URLでJPEGサムネイル画像を生成する
まずは基本的な、1枚のJPEG画像のサムネイルを生成してみます。ズバリ以下URLへのアクセスでサムネイル画像の生成が可能です。
https://customer-{CODE}.cloudflarestream.com/$VIDEOID/thumbnails/thumbnail.jpg
ここで、customer-{CODE}部分はアカウント固有のサブドメインです。（参考: Cloudflare Streamでアカウント固有のサブドメインを利用するようになりました | DevelopersIO）$VIDEOIDは動画コンテンツごとに割り振られるVideo IDですね、それぞれダッシュボード上の以下などから確認が可能です。
後述する方法でStream Playerへサムネイルとして埋め込むほか、Webブラウザから直接サムネイルのURLへアクセスすることで確認も可能です。
またURLクエリ文字列を用いてサムネイル画像を調整することも可能です。以下のパラメータをサポートしています。（詳細はDisplay thumbnails · Cloudflare Stream docsを参照ください。）
time- 動画コンテンツのどの時間からサムネイル画像を生成するか。デフォルトは
0s。8mや5m2sなどと指定。
- 動画コンテンツのどの時間からサムネイル画像を生成するか。デフォルトは
height- 生成するサムネイル画像の高さ。デフォルトは
640。
- 生成するサムネイル画像の高さ。デフォルトは
width- 生成するサムネイル画像の幅。デフォルトは
640。
- 生成するサムネイル画像の幅。デフォルトは
fit- 指定したサムネイル画像の高さと幅が元の動画コンテンツと一致しない場合の対処方法指定。
- 指定可能なパラメータは以下4種類。（デフォルトは
crop）crop- 指定されたサイズに収まらない部分をカット
clip- フレーム全体を保持し、指定されたサイズ内で画像サイズを縮小
scale- 与えられたサイズに合うように画像をゆがめる
fillv - フレーム全体を保持し、要求されたサイズの残りの部分を黒の背景で埋める
例えば以下は、動画コンテンツの開始から10秒経過の時点から、高さ720ピクセルでサムネイルを生成した例です。クエリパラメータとして?time=20s&height=720を付与しました。
JPEGサムネイル画像をStream Playerで使う
このサムネイル画像、Cloudflare Streamで提供している動画プレイヤーであるStream Playerで再生前のポスターとして利用可能です。以下iframe要素でWebページに埋め込む例ですが、src属性で指定する動画コンテンツのURLのあとに?poster=に続けてサムネイル画像のURLを、パーセントエンコーディング（URLエンコード）したものを追加します。
<iframe
src="https://customer-{CODE}.cloudflarestream.com/$VIDEOID/iframe?poster=https%3A%2F%2Fcustomer-%7BCODE%7D.%E2%80%8Bcloudflarestream.com%2F%24VIDEOID%2Fthumbnails%2Fthumbnail.jpg"
style="border: none"
height="720"
width="1280"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>
以下、クエリパラメータで生成するサムネイル画像の場所（時間、開始から20秒の時点）とサイズ（高さ720ピクセル）を指定してHTMLとして埋め込んでみた例です。
<html>
<head>
<title>Stream Player with Thumbnails</title>
</head>
<body>
<iframe
src="https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/9a35xxxxxxxxxxxxxxxxxxxxxxxxxxxx/iframe?poster=https%3A%2F%2Fcustomer-0jyoxxxxxxxxxxxx.cloudflarestream.com%2F9a35xxxxxxxxxxxxxxxxxxxxxxxxxxxx%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D20s%26height%3D720"
style="border: none"
height="720"
width="1280"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
>
</iframe>
</body>
</html>
なお、こちらのiframe埋め込み用コードは同等のものがダッシュボードの動画コンテンツページ、「Embed」のタグからも取得することができます。Poster部分でTimestampを選択してにサムネイル画像の取得時間を入力しましょう。
アニメーションGIFなサムネイルを生成する
URLでアニメーションGIFなサムネイルを生成する
基本的なJPEG画像のサムネイル生成が確認できたところで、続いていはアニメーションGIFなサムネイルの生成をしてみましょう。こちらもズバリ以下URLへのアクセスで生成ができます。拡張子を.jpgから.gifに変更するだけですね。
https://customer-{CODE}.cloudflarestream.com/$VIDEOID/thumbnails/thumbnail.gif
customer-{CODE}ならびに$VIDEOIDは先ほどと同様です、ダッシュボードなどから確認しましょう。
またJPEG画像のサムネイルと同様、URLクエリ文字列を用いて生成されるアニメーションGIFサムネイルを調整することが可能です。パラメータは以下となっています。アニメーションGIF特有のパラメータとしてdurationとfpsがある点を抑えておきましょう。（詳細はDisplay thumbnails · Cloudflare Stream docsを参照ください。）
time- 動画コンテンツのどの時間からサムネイルを生成するか。デフォルトは
0s。8mや5m2sなどと指定。
- 動画コンテンツのどの時間からサムネイルを生成するか。デフォルトは
height- 生成するサムネイルの高さ。デフォルトは
640。
- 生成するサムネイルの高さ。デフォルトは
width- 生成するサムネイルの幅。デフォルトは
640。
- 生成するサムネイルの幅。デフォルトは
fit- 指定したサムネイルの高さと幅が元の動画コンテンツと一致しない場合の対処方法指定。
- 指定可能なパラメータは以下4種類。（デフォルトは
crop）crop- 指定されたサイズに収まらない部分をカット
clip- フレーム全体を保持し、指定されたサイズ内で画像サイズを縮小
scale- 与えられたサイズに合うように画像をゆがめる
fill- フレーム全体を保持し、要求されたサイズの残りの部分を黒の背景で埋める
duration- アニメーションGIFの時間の長さ（尺）。デフォルトは
5s。
- アニメーションGIFの時間の長さ（尺）。デフォルトは
fps- アニメーションGIFのフレームレート。デフォルトは
8。
- アニメーションGIFのフレームレート。デフォルトは
以下、実際に生成してみたアニメーションGIFなサムネイルです。GIF画像として本ブログエントリに貼り付けてみました。パラメータとして?time=20s&height=360&duration=2s&fps=4を指定しています。
https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/9a35xxxxxxxxxxxxxxxxxxxxxxxxxxxx/thumbnails/thumbnail.gif?time=20s&height=360&duration=2s&fps=4
なお、画像貼り付けが可能なようにheight、duration、fpsなどを調整しています。より高い解像度のサムネイルも生成可能ですが、例えば高さheightは600ピクセルまでといった制限があるようです。以下は?height=720&duration=4sというパラメータで高さを720ピクセルとしようとしてみましたがエラーとなってしまったケースとなります。
アニメーションGIFなサムネイルをStream Playerで使う
アニメーションGIFなサムネイル、通常のJPEGサムネイルと同様にStream Playerのポスターとして利用可能です。使い方も同様に、src属性で指定する動画コンテンツのURLのあとに?poster=に続けてGIFアニメーションサムネイルのURLをパーセントエンコーディングしたものを追加します。
以下、HTMLとして埋め込んでみた例となります。
<html>
<head>
<title>Stream Player with Thumbnails</title>
</head>
<body>
<iframe
src="https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/9a35xxxxxxxxxxxxxxxxxxxxxxxxxxxx/iframe?poster=https%3A%2F%2Fcustomer-0jyoxxxxxxxxxxxx.cloudflarestream.com%2F9a35xxxxxxxxxxxxxxxxxxxxxxxxxxxx%2Fthumbnails%2Fthumbnail.gif%3Ftime%3D20s%26amp%3Bheight%3D360%26amp%3Bduration%3D2s%26amp%3Bfps%3D4"
style="border: none"
height="720"
width="1280"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
>
</iframe>
</body>
</html>
スクリーンショットだと少しわかりにくいのですが、再生ボタンを押す前にアニメーションGIFで動きのある画がみれます。
まとめ
Cloudflare Streamで動画のサムネイルを表示する方法について確認してみました。JPEG画像でのサムネイルのほか、GIFアニメーションでのサムネイルも利用可能です。サムネイルはVideo IDをもとにしたURLに対してクエリパラメータを付与、調整することでサムネイルを生成する時点やサムネイルの大きさなどを指定可能です。またStream Playerでポスターとして使用することができます。上手に活用することでコンテンツをよりリッチにして、動画自体を再生させる前にユーザのコンテンツに対する期待値を向上させることができるのではないでしょうか。
