Cloudflare Streamの動画プレイヤーでEnhancement Propertiesを使ってみた！
はじめに
清水です。Cloudflareの動画配信プラットフォームサービスCloudflare Streamでは「Stream Player」と呼ばれる動画プレイヤーが提供されています。この動画プレイヤーで Enhancement Properties と呼ばれる機能を使ってみましたのでまとめてみたいと思います。
なおこのStream Playerの Enhancement Properties 、ドキュメントのChangelogを確認すると2023/04/26付で機能アップデートされていたものであることが確認できます。
Changelog · Cloudflare Stream docs
Stream PlayerのEnhancement Propertiesでできること
まずはStream Playerの Enhancement Properties でできることを確認してみましょう。Changelogにはロゴなどのブランディング要素を追加したり、視聴者へ提示するオプションをカスタマイズできる、と記載がありますね。実際にドキュメントの該当ページ「Add player enhancements · Cloudflare Stream docs」には、Propertiesとして以下が記載されています。
title- 視聴者がビデオの上にカーソルを置いたときに表示されるタイトル。タイトルは動画のファイル名と異なる場合がある
share_link- 動画のURLを簡単に共有するためのclick-to-copyのオプションをユーザに提供する
channel_link- 動画プレイヤーでロゴを選択した際に、ユーザが移動するHTTPSのURL
logo- ロゴ画像のHTTPS URL
実際にどのようにうPlayerがカスタマイズできるのかみてみましょう。以下がデフォルト状態のPlayerです。
続いてPropertiesをカスタマイズしたPlayerです。マウスオーバーすると上部にロゴとタイトルが表示されます。これらの部分はリンクにもなっていて、クリック時にchannel_linkで指定した任意のURLにユーザを移動させることができます。
また右上にはシェアボタンが表示されます。クリックするとshare_linkで指定したシェア用のURLが表示されます。コピーボタンもありますね。この動画（プレイヤーページ）のURLを指定するほかに、任意のURLを指定することが可能です。
Enhancement Propertiesをダッシュボードから指定してみる
それでは実際にEnhancement PropertiesをCloudflareのダッシュボードから設定してみたいと思います。Streamのダッシュボードに進み、Enhancement Propertiesを設定する動画コンテンツの詳細ページに進みます。設定項目のタブとして「 Public Details（公開の詳細）」という項目が増えていますね！（以前はJSONまでの4項目でした。ここやここで確認ができます。）さっそくクリックしてみましょう。
Title（タイトル順）、Logo（ロゴ）、Share Link（リンクを共有）、Channel Link（チャネル リンク）の4つの項目が設定できます。
実際に入力してみました。ちなみにこの画面の下部のプレイヤーでは、[保存]ボタンを押す前に設定内容の確認ができます。
[保存]ボタンを押したら任意のプレイヤーページで確認してみましょう。例えば「ビデオ リンク」のリンクから辿れるpreviewページ（ページ末尾が/watchのページ）では以下のようになりました。
以下はiframeで埋め込んだページです。埋め込む方法は従来と変わりません。（参考: Cloudflare Streamで提供されている動画プレイヤーや再生方法を確認してみた | DevelopersIO）タイトルやロゴなど、HTMLで指定しているのではなく、<iframe>で埋め込んだ先（Stream Player側）で表示されるかたちとなります。
<html>
<head>
<title>Stream Player</title>
</head>
<body>
<div style="position: relative; padding-top: 56.25%;">
<iframe
src="https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/c409xxxxxxxxxxxxxxxxxxxxxxxxxxxx/iframe"
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>
</div>
</body>
</html>
Enhancement PropertiesをAPIから指定してみる
Cloudflare Streamのほかの操作と同様、この動画プレイヤーのEnhancement PropertiesもAPI経由で操作可能です。（API経由での操作については「Cloudflare StreamのライブストリーミングをAPIでやってみた | DevelopersIO」などを参照ください。）そちらについても確認してみましょう。まずは動画の情報をAPI経由で確認してみます。（パス/Stream/${VIDEOID}にGETリクエストを行います。）
% curl -X GET \
-H "Authorization: Bearer ${TOKEN}" \
"https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/${VIDEOID}"
{
"result": {
"uid": "bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"creator": "user-musashino",
"thumbnail": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/thumbnails/thumbnail.jpg",
"thumbnailTimestampPct": 0,
"readyToStream": true,
"status": {
"state": "ready",
"pctComplete": "100.000000",
"errorReasonCode": "",
"errorReasonText": ""
},
"meta": {
"downloaded-from": "https://my-s3-bucket.s3.ap-northeast-1.amazonaws.com/IMG_3435.MOV",
"name": "吉祥寺の駅"
},
"created": "2022-04-30T10:53:00.119086Z",
"modified": "2022-08-30T14:35:50.367746Z",
"size": 336065892,
"preview": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/watch",
"allowedOrigins": [],
"requireSignedURLs": false,
"uploaded": "2022-04-30T10:53:00.119078Z",
"uploadExpiry": null,
"maxSizeBytes": null,
"maxDurationSeconds": null,
"duration": 53.8,
"input": {
"width": 3840,
"height": 2160
},
"playback": {
"hls": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8",
"dash": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.mpd"
},
"watermark": null,
"clippedFrom": null,
"publicDetails": {
"title": "",
"share_link": "",
"channel_link": "",
"logo": ""
}
},
"success": true,
"errors": [],
"messages": []
}
ハイライトしたpublicDetailsの項目には何も設定されていない状態ですね。
ドキュメント（Add player enhancements · Cloudflare Stream docs）を確認すると、パス/stream/${VIDEOID}にpublicDetailsのデータをPOSTすることで設定できることがわかります。
curl --location --request POST "https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/${VIDEOID}" \
--header "Authorization: Bearer ${TOKEN}" \
--data '{
"publicDetails": {
"title": "タイトル",
"share_link": "シェア用リンクURL"
"channel_link": "ロゴ・タイトルをクリック際の遷移先URL",
"logo": "ロゴのHTTPS URL "
}
}'
以下、実際の実行例です。レスポンスのデータでpublicDetailsが設定されてたことがわかりますね。
% curl --location --request POST "https://api.cloudflare.com/client/v4/accounts/${ACCOUNT}/stream/${VIDEOID}" \
--header "Authorization: Bearer ${TOKEN}" \
--data '{
"publicDetails": {
"title": "Kichijoji Station",
"share_link": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/iframe",
"channel_link": "https://dev.classmethod.jp/author/shimizu-toshiya/",
"logo": "https://www.example.com/avatar/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
}'
{
"result": {
"uid": "bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"creator": "user-musashino",
"thumbnail": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/thumbnails/thumbnail.jpg",
"thumbnailTimestampPct": 0,
"readyToStream": true,
"status": {
"state": "ready",
"pctComplete": "100.000000",
"errorReasonCode": "",
"errorReasonText": ""
},
"meta": {
"downloaded-from": "https://my-s3-bucket.s3.ap-northeast-1.amazonaws.com/IMG_3435.MOV",
"name": "吉祥寺の駅"
},
"created": "2022-04-30T10:53:00.119086Z",
"modified": "2023-06-16T11:14:09.194091Z",
"size": 336065892,
"preview": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/watch",
"allowedOrigins": [],
"requireSignedURLs": false,
"uploaded": "2022-04-30T10:53:00.119078Z",
"uploadExpiry": null,
"maxSizeBytes": null,
"maxDurationSeconds": null,
"duration": 53.8,
"input": {
"width": 3840,
"height": 2160
},
"playback": {
"hls": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.m3u8",
"dash": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/manifest/video.mpd"
},
"watermark": null,
"clippedFrom": null,
"publicDetails": {
"title": "Kichijoji Station",
"share_link": "https://customer-0jyoxxxxxxxxxxxx.cloudflarestream.com/bbd3xxxxxxxxxxxxxxxxxxxxxxxxxxxx/iframe",
"channel_link": "https://dev.classmethod.jp/author/shimizu-toshiya/",
"logo": "https://www.example.com/avatar/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
},
"success": true,
"errors": [],
"messages": []
}
iframe用のページで動画プレイヤーを確認してみましょう。ロゴやタイトルなどが設定されていますね。
まとめ
Cloudflare Streamの動画プレイヤー「Stream Player」でEnhancement Propertiesを使って動画プレイヤーをカスタマイズしてみました。HTMLを編集するのではなく、動画コンテンツのプロパティを設定するだけでタイトルやロゴ、リンクURLやシェア用URLを設定できます。最近の動画プレイヤーとして定番になってきた項目が簡単に設定できますね。とても嬉しい機能だなと思いました！
また特にロゴ画像については、動画コンテンツごとに設定する画像をアップロードする、というかたちではなくURLを指定するかたちです。ほかのサイトなどであらかじめユーザごとのアイコンを設定している、などの場合にそのURLを指定すれば設定ができるという点が何気に嬉しいなと思いました。（今回の検証でもこのような想定、外部サイトからアイコンデータを取得するかたちで行っています。）
![Cloudflare StreamのLive Instant Clippingを使ってみた [open beta]](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-f6a10752c0ec2f1913230b2eb34a63c8/9b3b5893c230b3e40c46a79a9e06efc5/cloudflare-1200x630-1.jpg)
