同一内容自动适配不同平台比例。 触发词： - "多平台适配" - "不同比例" - "抖音/B站适配" - "viewport" 使用场景： - 抖音视频 (9:16) - B站/YouTube 视频 (16:9) - Instagram (1:1) - 小红书 (4:5)
多平台视口适配系统。
| 平台 | 比例 | 分辨率 | 说明 |
|---|---|---|---|
| 抖音 | 9:16 | 1080×1920 | 竖屏短视频 |
| 小红书 | 9:16 | 1080×1920 | 竖版图文 |
| B站 | 16:9 | 1920×1080 | 横屏视频 |
| YouTube | 16:9 | 1920×1080 | 横屏视频 |
| 1:1 | 1080×1080 | 方形帖子 | |
| 小红书 | 4:5 | 1080×1350 | 竖版图文 |
import { VIEWPORT_CONFIGS, ASPECT_RATIO_RULES } from "codemotion/shared/presets/viewport-rules";
// 获取平台配置
const douyin = VIEWPORT_CONFIGS.douyin;
// { aspectRatio: "9:16", width: 1080, height: 1920, ... }
// 缩放因子（相对于 16:9）
const scale = ASPECT_RATIO_RULES["9:16"].scale; // 0.5625
// ViewportWrapper.tsx
import { useVideoConfig } from "remotion";
import { VIEWPORT_CONFIGS } from "codemotion/shared/presets/viewport-rules";
export const ViewportWrapper: React.FC<{
platform: Platform;
children: React.ReactNode;
}> = ({ platform, children }) => {
const { width, height } = useVideoConfig();
const config = VIEWPORT_CONFIGS[platform];
// 计算缩放因子
const scale = width / config.width;
return (
<div
style={{
transform: `scale(${scale})`,
transformOrigin: "center center",
width: config.width,
height: config.height,
}}
>
{children}
</div>
);
};
┌─────────────────────┐
│ │
│ 顶部留白区 │
│ (约25%高度) │
├─────────────────────┤
│ │
│ 核心内容区 │
│ (居中显示) │
│ │
├─────────────────────┤
│ │
│ 底部留白区 │
│ (字幕/进度条) │
│ │
└─────────────────────┘
┌───────────────────────────────────────────┐
│ ┌─────────┐ ┌─────────┐ │
│ │ │ │ │ │
│ │ 左侧 │ 核心内容 │ 右侧 │ │
│ │ 字幕 │ │ 字幕 │ │
│ │ │ │ │ │
│ └─────────┘ └─────────┘ │
└───────────────────────────────────────────┘
import { AbsoluteFill } from "remotion";
import { ViewportWrapper } from "./ViewportWrapper";
import { SceneContent } from "./SceneContent";
export const MyVideo = () => {
return (
<AbsoluteFill style={{ backgroundColor: "#000" }}>
{/* 抖音版本 */}
<ViewportWrapper platform="douyin">
<SceneContent />
</ViewportWrapper>
{/* B站版本 */}
<ViewportWrapper platform="bilibili">
<SceneContent />
</ViewportWrapper>
</AbsoluteFill>
);
};
# 渲染抖音版本 (9:16)
npx remotion render MyVideo --composition-id=DouyinVideo out/douyin.mp4
# 渲染 B站版本 (16:9)
npx remotion render MyVideo --composition-id=BilibiliVideo out/bilibili.mp4
| 平台 | 字幕位置 | 说明 |
|---|---|---|
| 抖音 | 底部 15% | 竖屏阅读习惯 |
| B站 | 左侧 20% | 横屏可用右侧 |
| 底部 10% | 方形空间有限 | |
| 小红书 | 底部 20% | 竖版图文 |