Remotion LabRemotion Lab
渲染設定影片中繼資料

設定影片中繼資料

學習如何在 Remotion 渲染的影片中加入標題、藝術家、評論等中繼資料,支援 MP4、MOV 和 Matroska 格式。

設定影片中繼資料

影片檔案可以儲存各種中繼資料(metadata)。這些資料可以使用 npx remotion ffprobe 命令查看。

查看現有中繼資料

npx remotion ffprobe bigbuckbunny.mp4

輸出範例:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'bigbuckbunny.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: isomavc1mp42
    creation_time   : 2010-01-10T08:29:06.000000Z
    comment         : This is a comment
    artist          : Remotion
  Duration: 00:09:56.47, start: 0.000000, bitrate: 2119 kb/s
  Stream #0:0[0x1](und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 125 kb/s
  Stream #0:1[0x2](und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1280x720, 1991 kb/s, 24 fps

加入中繼資料

自 v4.0.216 起可用

你可以在以下渲染方式中設定中繼資料:

  • npx remotion render 中使用 --metadata
  • npx remotion lambda render 中使用 --metadata
  • npx remotion cloudrun render 中使用 --metadata
  • renderMedia() 中使用 metadata 選項
  • renderMediaOnLambda() 中使用 metadata 選項
  • renderMediaOnCloudrun() 中使用 metadata 選項

使用 CLI

# 加入單一中繼資料欄位
npx remotion render MyComp --metadata title="我的精彩影片"
 
# 加入多個中繼資料欄位
npx remotion render MyComp \
  --metadata title="我的精彩影片" \
  --metadata artist="創作者名稱" \
  --metadata comment="這是一段說明文字" \
  --metadata date="2024-03-15"

使用 renderMedia() API

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  outputLocation: "out/video.mp4",
  metadata: {
    title: "我的精彩影片",
    artist: "創作者名稱",
    album: "影片合集",
    comment: "使用 Remotion 製作",
    date: "2024-03-15",
    genre: "教學",
    copyright: "© 2024 版權所有",
    description: "這是一段詳細的描述文字",
  },
});

使用 Lambda 渲染

npx remotion lambda render \
  --metadata title="雲端渲染影片" \
  --metadata artist="製作人名稱" \
  MyComp
import { renderMediaOnLambda } from "@remotion/lambda";
 
await renderMediaOnLambda({
  region: "ap-northeast-1",
  functionName: "remotion-render",
  composition: "MyComp",
  serveUrl: "https://your-serve-url",
  codec: "h264",
  metadata: {
    title: "雲端渲染影片",
    artist: "製作人名稱",
  },
});

MP4 和 MOV 格式支援的中繼資料欄位

ISO Base Media Format 影片(.mp4.mov)只接受以下中繼資料欄位:

欄位名稱說明類型
title影片標題字串
artist藝術家/作者名稱字串
album_artist專輯藝術家字串
composer作曲家/作者字串
album所屬專輯/合集字串
date日期(通常為年份或完整日期)字串
encoding_tool編碼工具(FFmpeg 已自動設定)字串
comment評論(Remotion 已自動設定)字串
genre類型/風格字串
copyright版權資訊字串
grouping分組資訊字串
lyrics歌詞字串
description描述字串
synopsis概要字串
show節目名稱字串
episode_id集數 ID字串
network網路/頻道名稱字串
keywords關鍵字字串
episode_sort集數排序(0–255)int8
season_number季數(0–255)int8
media_type媒體類型(0–255)int8
hd_video是否為 HD(0 或 1)int8
gapless_playback無間隙播放(0 或 1)int8
compilation是否為合輯(0 或 1)int8

注意:標記為 int8 的欄位需要 0 到 255 之間的整數值。

int8 欄位的使用範例

await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  outputLocation: "out/video.mp4",
  metadata: {
    title: "第一集:入門介紹",
    show: "Remotion 教學系列",
    season_number: 1,    // int8:必須是 0-255 的整數
    episode_sort: 1,     // int8:集數排序
    hd_video: 1,         // int8:1 表示 HD 影片
    media_type: 10,      // int8:媒體類型代碼
  },
});

Matroska 格式支援的中繼資料

Matroska 影片(.webm.mkv)接受任意鍵值欄位,且鍵名不區分大小寫:

await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "vp8",
  outputLocation: "out/video.webm",
  metadata: {
    title: "WebM 影片",
    CustomField: "自訂欄位值",        // 任意鍵名
    ProjectName: "我的 Remotion 專案", // 任意鍵名
    Version: "1.0",                   // 任意鍵名
  },
});

Remotion 預設設定的中繼資料

Remotion 會自動設定以下中繼資料:

  • comment 欄位:設為 Made with Remotion [VERSION]。如果你自訂了 comment,它會與 Remotion 的預設值合併。
  • encoder 欄位:由 FFmpeg 自動設定為 Lavc[VERSION](代表 "libavcodec",FFmpeg 的影片編解碼器庫)。

完整使用範例

以下是一個為教學影片系列設定完整中繼資料的範例:

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "Episode1",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  outputLocation: "out/episode-1.mp4",
  metadata: {
    // 基本資訊
    title: "第一集:Remotion 入門",
    description: "在這一集中,我們介紹 Remotion 的基本概念和安裝方法。",
    comment: "這是我們教學系列的第一集",
 
    // 創作者資訊
    artist: "張小明",
    album_artist: "Remotion 中文教學",
    composer: "張小明",
 
    // 分類資訊
    show: "Remotion 中文教學系列",
    album: "Remotion 基礎課程",
    genre: "教學",
    network: "YouTube",
 
    // 集數資訊
    season_number: 1,
    episode_sort: 1,
 
    // 版權和時間
    copyright: "© 2024 張小明",
    date: "2024-03-15",
 
    // 技術資訊
    hd_video: 1,
    keywords: "Remotion, 影片製作, React, 動畫",
  },
});

驗證中繼資料

渲染完成後,使用 ffprobe 驗證中繼資料是否正確寫入:

npx remotion ffprobe out/episode-1.mp4

也可以直接使用 FFmpeg 的 ffprobe

ffprobe -v quiet -print_format json -show_format out/episode-1.mp4

參見