Cloudflare Streamの動画プレイヤーでEnhancement Propertiesを使ってみた！

Stream Player上にロゴやタイトル、クリック時のURLやシェア用のURLを設定することがEnhancement Propertiesを使うことで実現できます。動画のプロパティとして設定可能で、またロゴの指定がURLなのも嬉しいポイントです。

清水俊也

2023.06.19

はじめに

清水です。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の動画プレイヤーでEnhancement Propertiesを使ってみた！

はじめに

Stream PlayerのEnhancement Propertiesでできること

Enhancement Propertiesをダッシュボードから指定してみる

Enhancement PropertiesをAPIから指定してみる

まとめ

イベント

EVENT【5/29（水）大阪】Alteryxの使い方から導入メリットまですべてがわかるセミナー＆ワークショップ

EVENT【5/15（水）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会〜フィンテック / リテール業界案件特集〜を開催します

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

Cloudflare Streamの動画プレイヤーでEnhancement Propertiesを使ってみた！

はじめに

Stream PlayerのEnhancement Propertiesでできること

Enhancement Propertiesをダッシュボードから指定してみる

Enhancement PropertiesをAPIから指定してみる

まとめ

イベント

EVENT【5/29（水）大阪】Alteryxの使い方から導入メリットまですべてがわかるセミナー＆ワークショップ

EVENT【5/15（水）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会 〜フィンテック / リテール 業界案件特集〜 を開催します

EVENT【5/28（火）】AWSを最大活用するための1dayカンファレンス

EVENT【5/17（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【5/10（金） 名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

関連記事

Cloudflare Streamで動画のスケジュールによる自動削除が設定できるようになりました

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会〜フィンテック / リテール業界案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！