ライブインスタントクリッピング

ベータ

Streamは、クリエイターと視聴者が長い放送や録画の中から短く魅力的な部分をハイライトできるように、ライブストリームや録画のクリップを生成することをサポートしています。ライブインスタントクリップはエンドユーザーによって作成され、追加のストレージ料金やビデオライブラリへの新しいエントリを生じさせることはありません。

前提条件

ライブ入力を設定する際は、「ライブ再生と録画」(mode)が有効になっていることを確認してください。

プレビューやクリップを生成するためにAPIキーは必要ありませんが、ライブ入力を作成するには必要です。

ライブインスタントクリップは、ライブストリームの録画から動的に生成されます。クリップマニフェストやMP4を生成する際は、常にビデオIDを参照し、ライブ入力IDではなくビデオIDを使用してください。録画が削除されると、インスタントクリップは利用できなくなります。

プレビューマニフェスト

ユーザーが最近のコンテンツを再生し、シークできるように、HLSマニフェストURLにdurationパラメータを追加してプレビューマニフェストをリクエストします：

https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID||INPUT_ID>/manifest/video.m3u8?duration=5m

duration 文字列プレビューの長さ、最大5分。秒数（”30s”）または分数（“3m”）で指定します。

プレビューマニフェストが配信されると、ヘッダーに2つのプロパティを確認します：

preview-start-seconds 浮動小数点数プレビューマニフェストが開始するライブストリームまたは録画の開始からの秒数。クリップが放送の開始時間からのオフセットを参照する必要があるため、プレビューから範囲を選択できるアプリケーションで便利です。
stream-media-id 文字列ライブストリームまたは録画のビデオID。クリップURLがビデオIDを参照する必要があるため、入力IDを使用してプレーヤーをレンダリングするアプリケーションで便利です。

このマニフェストは、任意のHLS互換プレーヤーで再生およびシークできます。

ヘッダーの読み取り

マニフェストを読み込む際にヘッダーを読み取るには、プレーヤーがレスポンスを処理する方法を調整する必要があります。たとえば、HLS.js ↗を使用し、デフォルトのローダーを使用している場合は、pLoader（プレイリストローダー）クラスをオーバーライドします：

let currentPreviewStart;
let currentPreviewVideoID;

// マニフェストヘッダーを読み取るためにpLoader（プレイリストローダー）をオーバーライドします：
class pLoader extends Hls.DefaultConfig.loader {
  constructor(config) {
    super(config);
    var load = this.load.bind(this);
    this.load = function (context, config, callbacks) {
      if (context.type == 'manifest') {
        var onSuccess = callbacks.onSuccess;
        // 既存のonSuccessハンドラーをコピーして後で実行します。

        callbacks.onSuccess = function (response, stats, context, networkDetails) {
          // ここでの4番目の引数はHLS.jsでは文書化されていませんが、
          // マニフェストフェッチのレスポンスオブジェクトを含んでおり、ヘッダーを取得できます：

          currentPreviewStart =
            parseFloat(networkDetails.getResponseHeader('preview-start-seconds'));
          // プレビューマニフェストの開始時間を保存します。

          currentPreviewVideoID =
            networkDetails.getResponseHeader('stream-media-id');
          // プレビューが入力IDで読み込まれた場合に備えてビデオIDを保存します。

          onSuccess(response, stats, context);
          // そして既存の成功ハンドラーを実行します。
        };
      }
      load(context, config, callbacks);
    };
  }
}

// HLSを設定する際に新しいローダークラスを指定します
const hls = new Hls({
  pLoader: pLoader,
});

クリップマニフェスト

ライブストリームや録画のクリップを再生するには、ライブストリームの開始に対する相対的な開始時間と長さを指定してクリップマニフェストをリクエストします。

https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID>/manifest/clip.m3u8?time=600s&duration=30s

time 文字列クリップの開始時間（秒単位）、ライブストリームまたは録画の開始からの時間
duration 文字列クリップの長さ（秒単位）、最大60秒

このマニフェストは、任意のHLS互換プレーヤーで再生およびシークできます。

クリップMP4ダウンロード

クリップのMP4も動的に生成され、他のプラットフォームで保存および共有できます。

https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID>/clip.mp4?time=600s&duration=30s&filename=clip.mp4

time 文字列クリップの開始時間（秒単位）、ライブストリームまたは録画の開始からの時間（例：“500s”）
duration 文字列クリップの長さ（秒単位）、最大60秒（例：”60s”）
filename 文字列 (オプション) クリップのファイル名

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings