Stream Player を使う

Cloudflare は、オンデマンドとライブの両方を再生できるカスタマイズ可能な Web プレーヤーを提供します。追加の実装作業は不要です。

Web ページに Stream Player を追加するには、次のいずれかを使います。

• Cloudflare ダッシュボードの Stream ページで、特定の動画またはライブ入力の埋め込みコードを生成する。

  Videos を開く ↗

• 次のコード例を使い、<VIDEO_UID> を動画の UID（または 署名付きトークン）に、<CODE> を Stream ダッシュボードで確認できるお客様固有のカスタマーコードに置き換える。

<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>

Stream Player は React ↗ または Angular ↗ コンポーネントとしても利用できます。

• Chrome: バージョン 88 以降
• Firefox: バージョン 87 以降
• Edge: バージョン 89 以降
• Safari: バージョン 14 以降
• Opera: バージョン 75 以降

• Android の Chrome: バージョン 90
• Android の UC Browser: バージョン 12.12 以降
• Samsung Internet: バージョン 13 以降
• iOS の Safari: バージョン 13.4 以降（フルスクリーン以外では再生速度セレクターに対応）

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 calculation is height / width (assuming 16:9 aspect ratio) -->
<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 デフォルト: false

  • クエリ文字列パラメーターに autoplay フラグを含めると、プレーヤーは動画の自動再生を試みます。自動再生したくない場合は、autoplay=false に設定するのではなく、autoplay フラグ自体を含めないでください。モバイルブラウザーは一般にこの属性に対応しておらず、再生を始めるには視聴者が画面をタップする必要があります。無制限のインターネット回線を持たない利用者もいるため、モバイル利用者や通信量に上限がある利用者を考慮してから、この属性を使ってください。

• controls デフォルト: true

  • 再生 / 一時停止ボタン、音量操作などの動画コントロールを表示します。

• defaultTextTrack

  • 指定した言語コードのテキストトラックを有効にした状態でプレーヤーを初期化します。値は、テキストトラックのアップロード に使った BCP-47 言語コードにしてください。指定した言語コードのキャプションがない場合、言語コードを指定しなかったときと同じ動きになります。

• letterboxColor

  • 有効な CSS の色の値 ↗ を指定すると、プレーヤー UI のレターボックス / ピラーボックスに適用されます。フルスクリーン以外でレターボックス / ピラーボックスを避けたい場合は、transparent に設定できます。

• loop デフォルト: false

  • 有効にすると、動画の末尾に達したとき、プレーヤーは先頭へ自動でシークします。

• muted デフォルト: false

  • 設定すると、最初は音声がミュートされます。

• preload デフォルト: none

  • この列挙型オプションは、著者にとって最も良い体験につながると思う内容を、ブラウザーへのヒントとして伝えるためのものです。動画の先頭を先読みするには、preload="auto" を指定します。オプションを含めない場合、または preload="metadata" を使う場合は、再生開始時に必要なメタデータだけを読み込みます。

• poster デフォルトは動画の最初のフレーム

  • 再生開始前、またはダウンロード中に表示する画像の URL です。この属性を指定しない場合は、動画のサムネイル画像を表示します。

• primaryColor

  • 有効な CSS の色の値 ↗ を指定すると、プレーヤー UI の一部の要素に適用されます。

• src

  • Cloudflare Stream にアップロードした動画の動画 ID をここに指定します。

• startTime

  • 再生を開始する時刻を指定するタイムスタンプです。?startTime=123 のように数値だけを使うと、123 秒として解釈されます。読みやすい形式も使えます。たとえば ?startTime=1h12m27s は 1 時間 12 分 27 秒 です。

• ad-url

  • Stream Player は、プリロールなどの広告を挿入する VAST タグに対応しています。VAST タグの URI がある場合は、ad-url パラメーターで Stream Player に渡せます。URI は JavaScript の encodeURIComponent() のような関数でエンコードする必要があります。

動画の再生中に、キーの組み合わせ Shift-D で Stream Player の Debug メニューを表示 / 非表示にできます。

ライブストリームが終了すると、録画が自動で生成され、60 秒以内に利用できます。視聴と再生を確実にするため、次の点に注意してください。

• 視聴中にライブストリームが終了した場合、視聴者は 60 秒待ってからプレーヤーを再読み込みし、ライブストリームの録画を視聴します。
• ライブストリーム終了後、録画のステータスは API で確認できます。動画の state が ready になったら、いずれかのマニフェスト URL で録画をストリーミングできます。

ライブストリームの録画を生成しているあいだ、動画は not-found または not-started と報告されることがあります。

Live Input で Low-Latency HLS ベータが有効な場合、可能なら Stream Player は自動で低遅延モードで再生します。このオプションを有効にするには ライブストリームを開始する を参照してください。