Appearance
ビデオ
概要
Vimeo や YouTube 等、埋め込み可能なビデオを使用したビデオ機能を提供します。
INFO
Vimeo でライブ配信を使用する場合はプレミアムプランの契約が必要です。
WARNING
YouTube は、埋め込みを利用して有料配信化する事を規約で禁じています。
hedgehog で使用する際は、無料イベントに紐づける形でご利用ください。
サンプル
ここでは、ビデオを作成してフロントエンド側で情報を取得するまでの流れを解説します。
TIP
ステップ 1 ～ 2 は、Hedgehog Dashboard でも同様の操作が可能です。
WARNING
以下サンプルは、環境変数に STAGE_UUID がセットされている前提になります。
1. イベントを作成する admin
まずはイベント作成します。
ts
const event = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.admin.create({
title: "〇〇イベント",
isPublic: true,
isFree: true,
startDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
image: new File([], ""), // 本来はイベントのタイトル画像を入力します
});2. ビデオを作成する admin
イベントと紐づけるビデオを作成します。
作成の際に eventUuid が必要なので、先程作成したイベントの uuid を使用します。
ts
const video = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.video.admin.create({
title: "〇〇ビデオ",
eventUuid: event.uuid,
embeddedVideo: {
embedUrl: "https://sample.embedded.url",
},
});ここまでで、ビデオの作成は完了となります。
3. フロントエンドを作成する
イベントに使用する web サイトを作成します。イベントの趣旨に沿った web サイトを、自由に作成してください。
4. ビデオ情報を取得する
イベントに紐づくビデオをすべて取得します。
ts
const videos = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.ref("イベントのUUID")
.videos()
.all();
console.log(videos[0].embeddedVideo.embedUrl); // https://sample.embedded.urlWARNING
イベントが有料イベントだった場合、リスト取得のためにチケット番号を指定する必要があります。videos() の引数に関する詳細はドキュメントを参照してください。
ts
const videos = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.ref("イベントのUUID")
.videos("チケット番号")
.all();
console.log(videos[0].embeddedVideo.embedUrl); // https://sample.embedded.urlここでは一覧取得時に all() を使用していますが、数が多くなるようであれば page() を使用して取得数を制限し、フロントエンド上でもページネーションを実装する必要があるでしょう。
埋め込みビデオの情報が取得できるので、iframe 等によって適宜フロントエンドに実装していきます。