Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Live Instant Clipping

最終更新 Markdown で表示Agent セットアップ

Stream は、ライブ配信と録画のクリップ生成に対応しています。作成者も視聴者も、長い配信や録画から短い見どころを切り出せます。即時クリップはエンドユーザーが作成でき、追加のストレージ料金や動画ライブラリへの新規エントリは発生しません。

前提条件

Live input を設定するときは、「Live Playback and Recording」(mode)を有効にしてください。

プレビューやクリップの生成に API キーは不要です。Live Input の作成には必要です。

即時クリップは、ライブ配信の録画から動的に生成されます。クリップのマニフェストや MP4 を生成するときは、常に Video ID を参照し、Live Input ID は使わないでください。録画を削除すると、即時クリップも利用できなくなります。

プレビューマニフェスト

直近の内容の再生とシークを助けるため、HLS マニフェスト URL に duration パラメーターを付けてプレビューマニフェストをリクエストします。

Preview Manifesttxt
https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID||INPUT_ID>/manifest/video.m3u8?duration=5m
  • duration string プレビューの長さ。最大 5 分。「30s」のように秒数、または「3m」のように分数で指定します。

プレビューマニフェストが届いたら、ヘッダーの次の 2 つのプロパティを確認します。

  • preview-start-seconds float ライブストリームまたは録画の開始から、プレビューマニフェストが始まるまでの秒数。プレビューから範囲を選ばせるアプリで使います。クリップは プレビュー 開始時刻ではなく、配信 開始時刻からのオフセットを参照する必要があります。
  • stream-media-id string ライブストリームまたは録画の動画 ID。input ID でプレーヤーを描画するアプリで使います。クリップ URL は video ID を参照する必要があります。

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

ヘッダーを読む

マニフェスト読み込み時にヘッダーを取得するには、プレーヤーのレスポンス処理を調整する必要があります。たとえば HLS.js とデフォルトローダーを使う場合は、pLoader(プレイリストローダー)クラスを上書きします。

let currentPreviewStart;
let currentPreviewVideoID;

// Override the pLoader (playlist loader) to read the manifest headers:
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;
        // copy the existing onSuccess handler to fire it later.

        callbacks.onSuccess = function (response, stats, context, networkDetails) {
          // The fourth argument here is undocumented in HLS.js but contains
          // the response object for the manifest fetch, which gives us headers:

          currentPreviewStart =
            parseFloat(networkDetails.getResponseHeader('preview-start-seconds'));
          // Save the start time of the preview manifest

          currentPreviewVideoID =
            networkDetails.getResponseHeader('stream-media-id');
          // Save the video ID in case the preview was loaded with an input ID

          onSuccess(response, stats, context);
          // And fire the existing success handler.
        };
      }
      load(context, config, callbacks);
    };
  }
}

// Specify the new loader class when setting up HLS
const hls = new Hls({
  pLoader: pLoader,
});

クリップマニフェスト

ライブ配信または録画のクリップを再生するには、ライブ配信開始を基準にした開始時刻と長さを指定して、クリップマニフェストをリクエストします。

Clip Manifesttxt
https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID>/manifest/clip.m3u8?time=600s&duration=30s
  • time string クリップの開始時刻(秒)。ライブストリームまたは録画の開始からの経過時間
  • duration string クリップの長さ(秒)。最大 60 秒

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

クリップ MP4 のダウンロード

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

Clip MP4 Downloadtxt
https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID>/clip.mp4?time=600s&duration=30s&filename=clip.mp4
  • time string クリップの開始時刻(秒)。ライブストリームまたは録画の開始からの経過時間(例: "500s")
  • duration string クリップの長さ(秒)。最大 60 秒(例: "60s")
  • filename string (任意) クリップのファイル名

役に立ちましたか?