Stream Player API

さらに細かく制御・カスタマイズするには、動画の再生を制御し、メディアイベントを待ち受ける追加の JavaScript SDK を使えます。

この SDK を使うには、サイトに <script> タグを追加します。

<!-- You can use styles and CSS on this iframe element where the video player will appear -->
<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"
  id="stream-player"
></iframe>

<script src="https://embed.cloudflarestream.com/embed/sdk.latest.js"></script>

<!-- Your JavaScript code below-->
<script>
  const player = Stream(document.getElementById('stream-player'));
  player.addEventListener('play', () => {
    console.log('playing!');
  });
  player.play().catch(() => {
    console.log('playback failed, muting to try again');
    player.muted = true;
    player.play();
  });
</script>

• play() Promise

  • 動画の再生を開始します。

• pause() null

  • 動画の再生を一時停止します。

• autoplay boolean

  • autoplay 属性が設定されているかどうか（読み込み時に再生を開始できるか）を設定または返します。

• buffered TimeRanges readonly

  • TimeRanges インターフェイスに準拠するオブジェクトです。正規化されているため、範囲は順序付けされ、重複せず、空ではなく、隣接しません（隣り合う範囲は 1 つの大きな範囲にまとめられます）。

• controls boolean

  • 動画にコントロール（再生 / 一時停止など）を表示するかどうかを設定または返します。

• currentTime integer

  • 現在の再生位置を秒で返します。この値を設定すると、動画がその時刻へシークします。

• defaultTextTrack

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

• duration integer readonly

  • 動画の長さを秒で返します。

• ended boolean readonly

  • 動画が終了したかどうかを返します。

• letterboxColor string

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

• loop boolean

  • 終端に達したときに動画を最初から再生するかどうかを設定または返します。

• muted boolean

  • 動画と一緒に音声を再生するかどうかを設定または返します。

• paused boolean readonly

  • 動画が一時停止中かどうかを返します。

• played TimeRanges readonly

  • TimeRanges インターフェイスに準拠するオブジェクトです。正規化されているため、範囲は順序付けされ、重複せず、空ではなく、隣接しません（隣り合う範囲は 1 つの大きな範囲にまとめられます）。

• preload boolean

  • 要素の読み込み時に動画をプリロードするかどうかを設定または返します。

• primaryColor string

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

• volume float

  • 音量を 0.0（無音）から 1.0（最大）の範囲で設定または返します。

標準化されたメディア要素イベント ↗ のほとんどをサポートします。

• abort

  • 再生が中止されたときに送られます。たとえば、メディアの再生中に先頭から再開した場合に、このイベントが送られます。

• canplay

  • 少なくとも数フレーム分は再生できるデータがそろったときに送られます。

• canplaythrough

  • 現在のダウンロード速度が維持される前提で、メディア全体を途切れなく再生できるときに送られます。一時停止と再生を切り替えたときにも発火します。注: currentTime を手動で設定すると、Firefox では最終的に canplaythrough イベントが発火します。ほかのブラウザーでは発火しないことがあります。

• durationchange

  • メタデータが読み込まれたか変化し、メディアの長さが変わったことを示します。たとえば、長さが分かるまでメディアが読み込まれたときに送られます。

• ended

  • 再生が完了したときに送られます。

• error

  • エラーが起きたときに送られます（例: 動画のエンコードがまだ終わっていない、または不正な署名付き URL で動画の読み込みに失敗した）。

• loadeddata

  • メディアの最初のフレームの読み込みが完了しました。

• loadedmetadata

  • メディアのメタデータの読み込みが完了し、各属性に使える情報がそろいました。

• loadstart

  • メディアの読み込みが始まったときに送られます。

• pause

  • 再生状態が一時停止に変わったとき（paused プロパティが true）に送られます。

• play

  • play メソッドまたは autoplay 属性の結果として、再生状態が一時停止でなくなったときに送られます。

• playing

  • play イベントのあと、再生を開始できるデータがそろったときに送られます。ストールからの復帰時、ループ再生の再開時、シーク前に再生していた場合の seeked のあとも送られます。

• progress

  • メディアのダウンロード進行を関係者に知らせるために定期的に送られます。ダウンロード済みの量は、メディア要素の buffered 属性で確認できます。

• ratechange

  • 再生速度が変わったときに送られます。

• seeked

  • シーク操作が完了したときに送られます。

• seeking

  • シーク操作が始まったときに送られます。

• stalled

  • ユーザーエージェントがメディアデータを取得しようとしているのに、データが予期せず届かないときに送られます。

• suspend

  • メディアの読み込みが中断されたときに送られます。ダウンロード完了、またはほかの理由での一時停止で起きることがあります。

• timeupdate

  • 要素の currentTime 属性が示す時刻が変わりました。

• volumechange

  • 音量が変わったときに送られます（volume の設定時と muted 属性の変更時の両方）。

• waiting

  • 要求した操作（再生など）が、別の操作（シークなど）の完了待ちで遅延したときに送られます。

非標準イベントは、標準イベントと区別するために stream- という接頭辞が付きます。

• stream-adstart

  • ad-url 属性があり、広告の再生が始まったときに発火します。

• stream-adend

  • ad-url 属性があり、広告の再生が終わったときに発火します。

• stream-adtimeout

  • ad-url 属性があり、広告の読み込みに時間がかかりすぎたときに発火します。