コンテンツにスキップ

ストリームプレーヤーの使用

Cloudflareは、オンデマンドおよびライブビデオの再生が可能なカスタマイズ可能なウェブプレーヤーを提供しており、追加のエンジニアリング作業は不要です。

ストリームプレーヤーをウェブページに追加するには、次のいずれかの方法を使用できます。

<iframe
  src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
  style="border: none"
  height="720"
  width="1280"
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
  allowfullscreen="true"
></iframe>

ストリームプレーヤーは、React ↗またはAngular ↗コンポーネントとしても利用可能です。

プレーヤーサイズ

固定寸法

iframeのheightおよびwidth属性を変更すると、ホストページに表示されるiframeのピクセル値の寸法が変更されます。

<iframe
  src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
  style="border: none"
  height="400"
  width="400"
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
  allowfullscreen="true"
></iframe>

レスポンシブ

iframeをレスポンシブにするには、iframeをposition: absolute;に設定し、計算されたpadding-topパーセンテージを使用するコンテナを満たすスタイルが必要です。

<!-- padding-topの計算は高さ / 幅（16:9のアスペクト比を仮定） -->
<div style="position: relative; padding-top: 56.25%">
  <iframe
    src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
    style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>

基本オプション

プレーヤーオプションは、iframeのsrc属性のクエリストリングパラメータで構成されます。例えば：

https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe?autoplay=true&muted=true

  • autoplay default: false

    • autoplayフラグがクエリストリングパラメータとして含まれている場合、プレーヤーはビデオの自動再生を試みます。ビデオを自動再生させたくない場合は、autoplayフラグを全く含めないでください（autoplay=falseに設定するのではなく）。モバイルブラウザは一般的にこの属性をサポートしていないため、ユーザーは画面をタップしてビデオ再生を開始する必要があります。この属性を使用する前に、モバイルユーザーやインターネット使用制限のあるユーザーを考慮してください。

  • controls default: true

    • 再生/一時停止、音量調整などのビデオコントロールを表示します。

  • defaultTextTrack

    • 指定された言語コードのテキストトラックを有効にしてプレーヤーを初期化します。値は、テキストトラックをアップロードする際に使用されたBCP-47言語コード ↗である必要があります。指定された言語コードにキャプションが利用できない場合、プレーヤーは言語コードが提供されていないかのように動作します。

  • letterboxColor

    • 提供された任意の有効なCSSカラー値 ↗が、プレーヤーのUIのレターボックス/ピラーボックスに適用されます。フルスクリーンモードでない場合、レターボックス/ピラーボックスを避けるためにtransparentに設定できます。

  • loop default: false

    • 有効にすると、プレーヤーはビデオの終わりに達したときに自動的に最初に戻ります。

  • muted default: false

    • 設定されている場合、音声は最初にミュートされます。

  • preload default: none

    • この列挙オプションは、著者が最良のユーザーエクスペリエンスをもたらすと考えるものについて、ブラウザへのヒントを提供することを目的としています。ビデオの最初をプリロードするには、preload="auto"の値を指定できます。このオプションを含めないか、preload="metadata"を使用すると、要求されたときにビデオ再生を開始するために必要なメタデータのみが読み込まれます。

  • poster defaults to the first frame of the video

    • ビデオが開始される前またはビデオがダウンロード中に表示される画像のURLです。この属性が指定されていない場合、ビデオのサムネイル画像が表示されます。

  • primaryColor

    • 提供された任意の有効なCSSカラー値 ↗が、プレーヤーのUIの特定の要素に適用されます。

  • src

    • Cloudflare StreamにアップロードしたビデオのIDをここに含める必要があります。

  • startTime

    • 再生が開始される時間を指定するタイムスタンプです。?startTime=123のように単純な数値を使用すると、123秒として解釈されます。?startTime=1h12m27sのように、より人間が読みやすいタイムスタンプも使用できます。

  • ad-url

    • ストリームプレーヤーは、プライロールなどの広告を挿入するためにVASTタグをサポートしています。VASTタグURIがある場合、ad-urlパラメータを設定することでストリームプレーヤーに渡すことができます。URIは、JavaScriptのencodeURIComponent()のような関数を使用してエンコードする必要があります。

デバッグ情報

ストリームプレーヤーのデバッグメニューは、ビデオ再生中にShift-Dのキーコンビネーションを使用して表示および非表示にできます。

ライブストリーム録画再生

ライブストリームが終了した後、録画が自動的に生成され、60秒以内に利用可能になります。ビデオの視聴と再生を成功させるために、次の点に留意してください。

  • ライブストリームが視聴者が視聴中に終了した場合、視聴者は60秒待ってからプレーヤーをリロードしてライブストリームの録画を視聴する必要があります。
  • ライブストリームが終了した後、APIを介して録画のステータスを確認できます。ビデオの状態がreadyの場合、録画をストリーミングするためにマニフェストURLの1つを使用できます。

ライブストリームの録画が生成されている間、ビデオはnot-foundまたはnot-startedと報告される場合があります。

低遅延HLS再生 Beta

低遅延HLSベータ用にライブ入力が有効になっている場合、ストリームプレーヤーは可能であれば自動的に低遅延モードで再生されます。このオプションを有効にするには、ライブストリームを開始する ↗を参照してください。

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings