Pixelle-Video 视频模板使用指南

# Pixelle-Video 视频模板使用指南

## 模板系统概述

Pixelle-Video 使用 HTML 模板来控制视频的视觉呈现。模板定义了视频的布局、样式和动画效果。

## 模板命名规范

系统中的模板文件遵循命名规则：

| 前缀 | 类型 | 说明 |
|——|——|——|
| static_*.html | 静态模板 | 无需 AI 生成媒体，纯文字样式 |
| image_*.html | 图片模板 | 使用 AI 生成的图片作为背景 |
| video_*.html | 视频模板 | 使用 AI 生成的视频作为背景 |

## 尺寸分类

模板按尺寸分为三类：

| 分类 | 用途 | 常见尺寸 |
|——|——|———-|
| 竖屏 | 抖音、快手、视频号 | 9:16 |
| 横屏 | YouTube、B站 | 16:9 |
| 方形 | Instagram | 1:1 |

## 界面操作

### 选择模板
1. 在「视觉设置」中找到「视频模板」下拉菜单
2. 模板按尺寸分组显示
3. 选择适合的模板

### 预览模板
点击「预览模板」按钮，可以自定义参数测试效果。

### 自定义模板
如果你熟悉 HTML，可以在 `templates/` 文件夹中创建自己的模板。

## 内置模板

### 静态模板（static_*）
纯文字展示，无需生成配图：
– `static_portrait.html` – 竖屏静态
– `static_landscape.html` – 横屏静态
– `static_square.html` – 方形静态

### 图片模板（image_*）
使用 AI 生成的图片作为背景：
– `image_portrait.html` – 竖屏图片背景
– `image_landscape.html` – 横屏图片背景
– `image_square.html` – 方形图片背景

### 视频模板（video_*）
使用 AI 生成的视频作为背景（高级功能）

## 模板自定义

### 基本结构

“`html

“`

### 自定义变量

| 变量 | 说明 |
|——|——|
| {{TEXT}} | 分镜文案内容 |
| {{AUDIO_PATH}} | 语音文件路径 |
| {{IMAGE_PATH}} | 当前分镜图片路径 |

### 样式示例

“`css
.video-container {
width: 100%;
height: 100%;
position: relative;
}

.background-media {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}

.text-overlay {
position: absolute;
bottom: 10%;
left: 5%;
right: 5%;
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
“`

## 推荐模板设置

| 场景 | 推荐模板 | 尺寸 |
|——|———-|——|
| 抖音短视频 | image_portrait.html | 竖屏 9:16 |
| 知识科普 | image_landscape.html | 横屏 16:9 |
| 朋友圈分享 | image_square.html | 方形 1:1 |

## 常见问题

**Q：模板显示异常**
A：检查 HTML 语法是否正确，确保变量占位符使用 {{ }} 格式

**Q：文字被截断**
A：调整 CSS 中的 overflow 属性或字体大小

**Q：背景图片不显示**
A：确认图片路径正确，使用绝对路径