コンテンツにスキップ

ストリームプレイヤーAPI

さらなる制御とカスタマイズのために、ビデオ再生を制御し、メディアイベントをリッスンするために使用できる追加のJavaScript SDKを提供しています。

このSDKを使用するには、ウェブサイトに追加の<script>タグを追加します：

<!-- ビデオプレイヤーが表示されるこのiframe要素にスタイルとCSSを使用できます -->
<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>


<!-- 以下にあなたのJavaScriptコード-->
<script>
  const player = Stream(document.getElementById('stream-player'));
  player.addEventListener('play', () => {
    console.log('再生中！');
  });
  player.play().catch(() => {
    console.log('再生に失敗しました。再試行のためにミュートします');
    player.muted = true;
    player.play();
  });
</script>

メソッド

  • play() Promise

    • ビデオ再生を開始します。

  • pause() null

    • ビデオ再生を一時停止します。

プロパティ

  • autoplay boolean

    • 自動再生属性が設定されているかどうかを設定または返します。これにより、読み込み時にビデオ再生が開始されます。

一部のブラウザでは、音声付きのビデオが自動的に再生されるのを防ぎます。ビデオが自動再生されるようにするには、mute属性を追加できます。詳細については、iOSビデオポリシー ↗を確認してください。

  • buffered TimeRanges readonly

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

  • controls boolean

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

  • currentTime integer

    • 現在の再生時間を秒単位で返します。この値を設定すると、ビデオが新しい時間にシークされます。

  • defaultTextTrack

これは初期化中にのみ機能します。それ以降は、ユーザーがテキストトラックの設定を完全に制御できます。

  • 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

    • 要素の読み込み時にビデオがプリロードされるかどうかを設定または返します。

<video>要素は、この属性の値に従うようにブラウザを強制しません。これは単なるヒントです。preload="none"オプションは有効なHTML5属性ですが、Streamプレイヤーは常にプレイヤーを初期化するためにいくつかのメタデータを読み込みます。この場合に読み込まれるデータの量はわずかです。

  • 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イベントの後、またはスタールから回復するとき、ループメディアが再起動するとき、シーク後に再生していた場合に送信されます。

  • progress

    • メディアのダウンロード進行状況を関心のある関係者に通知するために定期的に送信されます。メディアの現在のダウンロード量に関する情報は、メディア要素のbuffered属性で利用可能です。

  • ratechange

    • 再生速度が変更されたときに送信されます。

  • seeked

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

  • seeking

    • シーク操作が開始されたときに送信されます。

  • stalled

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

  • suspend

    • メディアの読み込みが一時停止されたときに送信されます。これは、ダウンロードが完了したか、他の理由で一時停止された場合に発生する可能性があります。

  • timeupdate

    • 要素のcurrentTime属性によって示される時間が変更されたときに送信されます。

  • volumechange

    • 音声の音量が変更されたときに送信されます（音量が設定されたときとミュート属性が変更されたときの両方）。

  • waiting

    • 要求された操作（再生など）が、他の操作（シークなど）の完了を待って遅延しているときに送信されます。

非標準イベント

非標準イベントは、標準イベントと区別するためにstream-で接頭辞が付けられています。

  • stream-adstart

    • ad-url属性が存在し、広告の再生が開始されたときに発火します。

  • stream-adend

    • ad-url属性が存在し、広告の再生が終了したときに発火します。

  • stream-adtimeout

    • ad-url属性が存在し、広告の読み込みに時間がかかりすぎたときに発火します。
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings