画像・動画・音声

Image、Video、Audio は src からファイルを読み込みます。相対パスはコンポジションのファイルが基準なので、プロジェクト内でメディアを隣に置いてください。

src には http:// または https:// の URL も指定できます。ネイティブのプレビュー、書き出し、preloadMedia() は初回にダウンロードし、ローカルにキャッシュします。以後は更新確認をせずに再利用するため、内容が変わった場合は URL を変更するかキャッシュを削除してください。

import { Audio, Composition, Image, Sequence, Video, frameKeyframes } from '@celesta/react';
import { mediaDurationInFrames, preloadMedia } from '@celesta/media-utils';

const FPS = 30;
let clipFrames = 150;

// Runs once before the first frame: read the clip's length from the file.
export async function prepare() {
  const clip = await preloadMedia('./media/walk.mp4');
  clipFrames = mediaDurationInFrames(clip, FPS) ?? clipFrames;
}

export default function Root() {
  return (
    <Composition width={1920} height={1080} fps={FPS}
      durationInFrames={clipFrames + 60}>
      <Sequence durationInFrames={clipFrames}>
        <Video src="./media/walk.mp4" />
      </Sequence>
      <Sequence from={clipFrames}>
        <Image src="./media/end-card.png" />
      </Sequence>
      {/* Fade the music in over the first two seconds. */}
      <Audio
        src="./media/music.wav"
        volume={frameKeyframes([
          { frame: 0, value: 0 },
          { frame: 60, value: 0.8, easing: 'ease-out' },
        ], { fps: FPS })}
      />
    </Composition>
  );
}

• Image と Video は自身のピクセルサイズで描画されます。x / y とアンカーで配置し、scale または Fit で拡縮します。画像は PNG、JPEG、WebP、PNM に対応します。
• Video と Audio は startFrom（ファイル内の開始秒）、playbackRate、volume、muted を取ります。Video は動画の音声も鳴らすので、音を聞くために同じファイルの Audio を並べる必要はありません。映像だけにするときは muted を指定します。
• Sequence 内のメディアはシーケンスの開始と同時に始まり、終了時に止まります。
• volume と音声の playbackRate には数値またはキーフレームを使えます。時刻は親シーケンスの開始からの秒数で、{ value, timescale } の形式です。

frameKeyframes(keys, { fps, origin? }) は、フレーム番号から音量や再生速度のキーフレームを作ります。時刻は Audio を囲む Sequence の時計で (frame - origin) / fps 秒となり、origin の既定値は 0 です。音声のフェードなどに使えます。ブラウザでの書き出しは、固定の音量と再生速度に限られます。

メディアに合わせてシーンの長さを決める

任意の prepare() エクスポートは描画前に一度だけ実行され、async にできます。この例は preloadMedia() で動画の長さを取得し、mediaDurationInFrames() でフレーム数に変換するので、エンドカードが常に映像の直後に来ます。