Stream は、ライブ配信と録画のクリップ生成に対応しています。作成者も視聴者も、長い配信や録画から短い見どころを切り出せます。即時クリップはエンドユーザーが作成でき、追加のストレージ料金や動画ライブラリへの新規エントリは発生しません。
Live input を設定するときは、「Live Playback and Recording」(mode)を有効にしてください。
プレビューやクリップの生成に API キーは不要です。Live Input の作成には必要です。
即時クリップは、ライブ配信の録画から動的に生成されます。クリップのマニフェストや MP4 を生成するときは、常に Video ID を参照し、Live Input ID は使わないでください。録画を削除すると、即時クリップも利用できなくなります。
直近の内容の再生とシークを助けるため、HLS マニフェスト URL に duration パラメーターを付けてプレビューマニフェストをリクエストします。
https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID||INPUT_ID>/manifest/video.m3u8?duration=5mdurationstring プレビューの長さ。最大 5 分。「30s」のように秒数、または「3m」のように分数で指定します。
プレビューマニフェストが届いたら、ヘッダーの次の 2 つのプロパティを確認します。
preview-start-secondsfloat ライブストリームまたは録画の開始から、プレビューマニフェストが始まるまでの秒数。プレビューから範囲を選ばせるアプリで使います。クリップは プレビュー 開始時刻ではなく、配信 開始時刻からのオフセットを参照する必要があります。stream-media-idstring ライブストリームまたは録画の動画 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,
});ライブ配信または録画のクリップを再生するには、ライブ配信開始を基準にした開始時刻と長さを指定して、クリップマニフェストをリクエストします。
https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID>/manifest/clip.m3u8?time=600s&duration=30stimestring クリップの開始時刻(秒)。ライブストリームまたは録画の開始からの経過時間durationstring クリップの長さ(秒)。最大 60 秒
このマニフェストは、HLS 対応の任意のプレーヤーで再生およびシークできます。
クリップの MP4 も動的に生成でき、保存して他のプラットフォームで共有できます。
https://customer-<CODE>.cloudflarestream.com/<VIDEO_ID>/clip.mp4?time=600s&duration=30s&filename=clip.mp4timestring クリップの開始時刻(秒)。ライブストリームまたは録画の開始からの経過時間(例: "500s")durationstring クリップの長さ(秒)。最大 60 秒(例: "60s")filenamestring (任意) クリップのファイル名