Pixelle-Video 如何创建并使用自定义 HTML 视频模板【免费下载链接】Pixelle-Video AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-VideoPixelle-Video 的视频画面由 HTML 模板定义渲染引擎读取模板中的 HTML/CSS把标题、当前分镜文本和 AI 生成的媒体图片/视频组合成每一帧画面最终拼接为短视频。当你觉得内置模板的布局、字体或配色不符合需求时可以自己写一个 HTML 文件放进templates/对应的尺寸目录然后在 Web 界面、配置文件或 API 请求中指定这个模板名称来生成视频。前提是你的运行环境已具备 HTML 渲染所需依赖——在 Linux 上需要安装 fontconfig 和基础字体如sudo apt-get install -y fontconfig fonts-liberation fonts-noto-cjk并通过playwright install --with-deps chromium安装 Playwright 浏览器这部分说明见 frame_html.py 文件头部的注释。先弄清模板的三条约定写模板之前需要确认三件事它们决定了文件放哪里、文件怎么命名、画面多大1. 模板存放在templates/下按尺寸分目录templates/ ├── 1080x1920/ # 竖屏 │ ├── static_*.html # 静态模板 │ ├── image_*.html # 图片模板 │ └── video_*.html # 视频模板 ├── 1920x1080/ # 横屏 │ └── image_*.html # 图片模板 └── 1080x1080/ # 方形 └── image_*.html # 图片模板视频的实际尺寸不是写在 CSS 里解析的而是由父目录名解析得出例如1080x1920/image_xxx.html会渲染成 1080×1920 的画面目录名必须是宽度x高度格式见 template_util.py 中的parse_template_size。2. 文件名前缀决定模板类型命名规范见 docs/zh/user-guide/templates.mdstatic_*.html静态模板纯文字渲染不调用任何媒体生成适合快速生成、低成本场景image_*.html图片模板用 AI 生成的图片作背景调用图像生成工作流video_*.html视频模板用 AI 生成的视频作背景调用视频生成工作流。Web 界面的模板图库只显示文件名以static_、image_、video_开头的模板见 style_config.py所以自定义模板必须带这三个前缀之一否则在界面上选不到。文件名不符合前缀约定时后端会记录警告并按image类型兜底处理见get_template_type。3. 模板内可用的变量文档列出的模板变量templates.md{{ title }}— 视频标题可选{{ text }}— 当前分镜的文本内容{{ image }}— 当前分镜的图片如果有此外还支持自定义参数语法{{参数名:类型默认值}}类型支持text、number、color、bool。内置模板 templates/1080x1920/image_default.html 就用了这个语法div classlogo{{authorPixelle.AI}}/div div classauthor-desc{{describeOpen Source Omnimodal AI Creative Agent}}/div div classlogo{{brandPixelle-Video}}/div解析规则在 frame_html.py 的parse_template_parameters中title、text、image、index是预设参数不会被当作自定义参数暴露自定义参数如果提供了值就用值没提供就用占位符里的默认值两者都没有则替换为空字符串。创建一个自定义模板从现有模板复制起步最短路径是照官方文档给出的步骤templates.md从templates/目录复制一个现有模板文件修改 HTML 和 CSS 样式保存到对应尺寸目录下使用.html扩展名文件名带static_/image_/video_前缀在配置或 Web 界面中使用新模板名称。如果想从零写文档给出了一个完整的示例模板竖屏、渐变背景、只展示{{ text }}可直接作为骨架!DOCTYPE html html head style body { width: 1080px; height: 1920px; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; } .content { text-align: center; color: white; padding: 40px; } .text { font-size: 48px; line-height: 1.6; } /style /head body div classcontent div classtext{{ text }}/div /div /body /html控制 AI 生成媒体的尺寸image_/video_ 模板image_和video_模板需要 AI 生成背景媒体生成的媒体尺寸可以由模板里的 meta 标签指定。内置模板 image_default.html 头部有meta nametemplate:media-width content1024 meta nametemplate:media-height content1024渲染服务会解析这两个标签决定媒体生成宽高get_media_size如果模板里没有这对 meta 标签会记录警告并回退到 1024×1024。新建图片/视频模板时建议显式加上这两行。static_模板不走媒体生成可以不加。添加自定义参数可选希望模板里有些字段比如强调色、品牌名可以在界面上逐项填写就在 HTML 里用{{参数名:类型默认值}}占位。api/routers/frame.py 的文档里给出的示例写法div stylecolor: {{accent_color:color#ff0000}} {{custom_text:textHello World}} /div这样accent_color颜色选择器默认#ff0000和custom_text文本默认Hello World会出现在 Web 界面的自定义模板参数区域也能通过 API 的template_params传值渲染时自定义参数会合并进模板上下文见 frame_processor.py 的_compose_frame_html。文档给出的排版与性能建议templates.md 的模板开发技巧部分建议body尺寸与目标视频尺寸一致竖屏width: 1080px; height: 1920px;、横屏width: 1920px; height: 1080px;、方形width: 1080px; height: 1080px;文字加阴影或背景提高对比度并控制长度避免溢出图片用object-fit: cover填充并考虑加载失败的降级方案避免过于复杂的 CSS 动画、优化背景图大小、使用系统字体或 Web 安全字体。验证模板渲染结果在拿模板生成完整视频之前有两条低成本的验证路径。方式一API 渲染单帧启动 API 服务后调用GET /frame/template/params检查模板的自定义参数是否被正确解析参数名、类型、默认值都会返回再调用POST /frame/render实际渲染一帧。frame.py 文档中的请求示例{ template: 1080x1920/modern.html, title: Welcome, text: This is a beautiful frame with custom styling, image: resources/example.png }把template换成你的新模板格式为尺寸目录/文件名.html。渲染成功会返回生成帧图片的路径frame_path以及从模板路径解析出的width、height。/frame/render还会先调用resolve_template_path模板不存在时抛错模板没找到是最常见的失败原因。方式二Web 界面预览在 Web 界面进入模板配置区style_config.py按类型static/image/video在模板图库中点击选择你的新模板界面会显示该模板的视频尺寸展开模板预览折叠区填入标题、正文和图片路径预览图片默认值resources/example.png点击预览按钮。渲染成功后界面显示预览图片和文件路径失败则显示具体错误信息。这一步走的就是HTMLFrameGenerator.generate_frame与正式生成视频时合成帧用的是同一套渲染逻辑预览效果即为成片帧效果。在正式生成视频时使用新模板三条使用入口按需选其一或组合1. Web 界面模板选定后会随任务提交无需额外配置。2. 配置文件把 config.example.yaml 复制为config.yaml后在template节设置默认模板template: default_template: 1080x1920/image_default.html把值改成你的模板路径尺寸目录/文件名.html格式未显式指定模板的生成任务就会用它。3. API 视频生成请求请求体中支持frame_template和template_params字段见 api/schemas/video.py 的字段定义与示例例如{ frame_template: 1080x1920/image_default.html, template_params: { accent_color: #ff0000 } }模板路径支持多种写法只写文件名时按默认尺寸1080x1920解析尺寸/文件名.html、templates/尺寸/文件名.html也可以。排查与限制模板找不到resolve_template_path找不到模板时会抛出Template not found并列出该尺寸下可用的模板列表。注意解析顺序是先查自定义目录data/templates/再查内置templates/见 template_util.py 的get_template_full_path与resolve_template_path注释把新文件放进data/templates/1080x1920/也能被识别且覆盖同名内置模板适合不想动内置templates/目录的场景。尺寸解析失败目录名不是宽度x高度格式、或直接放在templates/根下parse_template_size会抛ValueError报错信息里带期望格式说明。Web 界面上看不到新模板先确认文件名以static_、image_、video_开头且所在目录名是标准尺寸格式界面图库只列出符合命名约定的模板。image_/video_模板必须配好对应媒体生成能力ComfyUI 工作流或 API 模型static_模板则跳过媒体生成环节无需任何生成配置。更多模板开发问题文档指向项目的 GitHub Issues 讨论见 templates.md 末尾。【免费下载链接】Pixelle-Video AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Pixelle-Video 如何创建并使用自定义 HTML 视频模板？
Pixelle-Video 如何创建并使用自定义 HTML 视频模板【免费下载链接】Pixelle-Video AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-VideoPixelle-Video 的视频画面由 HTML 模板定义渲染引擎读取模板中的 HTML/CSS把标题、当前分镜文本和 AI 生成的媒体图片/视频组合成每一帧画面最终拼接为短视频。当你觉得内置模板的布局、字体或配色不符合需求时可以自己写一个 HTML 文件放进templates/对应的尺寸目录然后在 Web 界面、配置文件或 API 请求中指定这个模板名称来生成视频。前提是你的运行环境已具备 HTML 渲染所需依赖——在 Linux 上需要安装 fontconfig 和基础字体如sudo apt-get install -y fontconfig fonts-liberation fonts-noto-cjk并通过playwright install --with-deps chromium安装 Playwright 浏览器这部分说明见 frame_html.py 文件头部的注释。先弄清模板的三条约定写模板之前需要确认三件事它们决定了文件放哪里、文件怎么命名、画面多大1. 模板存放在templates/下按尺寸分目录templates/ ├── 1080x1920/ # 竖屏 │ ├── static_*.html # 静态模板 │ ├── image_*.html # 图片模板 │ └── video_*.html # 视频模板 ├── 1920x1080/ # 横屏 │ └── image_*.html # 图片模板 └── 1080x1080/ # 方形 └── image_*.html # 图片模板视频的实际尺寸不是写在 CSS 里解析的而是由父目录名解析得出例如1080x1920/image_xxx.html会渲染成 1080×1920 的画面目录名必须是宽度x高度格式见 template_util.py 中的parse_template_size。2. 文件名前缀决定模板类型命名规范见 docs/zh/user-guide/templates.mdstatic_*.html静态模板纯文字渲染不调用任何媒体生成适合快速生成、低成本场景image_*.html图片模板用 AI 生成的图片作背景调用图像生成工作流video_*.html视频模板用 AI 生成的视频作背景调用视频生成工作流。Web 界面的模板图库只显示文件名以static_、image_、video_开头的模板见 style_config.py所以自定义模板必须带这三个前缀之一否则在界面上选不到。文件名不符合前缀约定时后端会记录警告并按image类型兜底处理见get_template_type。3. 模板内可用的变量文档列出的模板变量templates.md{{ title }}— 视频标题可选{{ text }}— 当前分镜的文本内容{{ image }}— 当前分镜的图片如果有此外还支持自定义参数语法{{参数名:类型默认值}}类型支持text、number、color、bool。内置模板 templates/1080x1920/image_default.html 就用了这个语法div classlogo{{authorPixelle.AI}}/div div classauthor-desc{{describeOpen Source Omnimodal AI Creative Agent}}/div div classlogo{{brandPixelle-Video}}/div解析规则在 frame_html.py 的parse_template_parameters中title、text、image、index是预设参数不会被当作自定义参数暴露自定义参数如果提供了值就用值没提供就用占位符里的默认值两者都没有则替换为空字符串。创建一个自定义模板从现有模板复制起步最短路径是照官方文档给出的步骤templates.md从templates/目录复制一个现有模板文件修改 HTML 和 CSS 样式保存到对应尺寸目录下使用.html扩展名文件名带static_/image_/video_前缀在配置或 Web 界面中使用新模板名称。如果想从零写文档给出了一个完整的示例模板竖屏、渐变背景、只展示{{ text }}可直接作为骨架!DOCTYPE html html head style body { width: 1080px; height: 1920px; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; } .content { text-align: center; color: white; padding: 40px; } .text { font-size: 48px; line-height: 1.6; } /style /head body div classcontent div classtext{{ text }}/div /div /body /html控制 AI 生成媒体的尺寸image_/video_ 模板image_和video_模板需要 AI 生成背景媒体生成的媒体尺寸可以由模板里的 meta 标签指定。内置模板 image_default.html 头部有meta nametemplate:media-width content1024 meta nametemplate:media-height content1024渲染服务会解析这两个标签决定媒体生成宽高get_media_size如果模板里没有这对 meta 标签会记录警告并回退到 1024×1024。新建图片/视频模板时建议显式加上这两行。static_模板不走媒体生成可以不加。添加自定义参数可选希望模板里有些字段比如强调色、品牌名可以在界面上逐项填写就在 HTML 里用{{参数名:类型默认值}}占位。api/routers/frame.py 的文档里给出的示例写法div stylecolor: {{accent_color:color#ff0000}} {{custom_text:textHello World}} /div这样accent_color颜色选择器默认#ff0000和custom_text文本默认Hello World会出现在 Web 界面的自定义模板参数区域也能通过 API 的template_params传值渲染时自定义参数会合并进模板上下文见 frame_processor.py 的_compose_frame_html。文档给出的排版与性能建议templates.md 的模板开发技巧部分建议body尺寸与目标视频尺寸一致竖屏width: 1080px; height: 1920px;、横屏width: 1920px; height: 1080px;、方形width: 1080px; height: 1080px;文字加阴影或背景提高对比度并控制长度避免溢出图片用object-fit: cover填充并考虑加载失败的降级方案避免过于复杂的 CSS 动画、优化背景图大小、使用系统字体或 Web 安全字体。验证模板渲染结果在拿模板生成完整视频之前有两条低成本的验证路径。方式一API 渲染单帧启动 API 服务后调用GET /frame/template/params检查模板的自定义参数是否被正确解析参数名、类型、默认值都会返回再调用POST /frame/render实际渲染一帧。frame.py 文档中的请求示例{ template: 1080x1920/modern.html, title: Welcome, text: This is a beautiful frame with custom styling, image: resources/example.png }把template换成你的新模板格式为尺寸目录/文件名.html。渲染成功会返回生成帧图片的路径frame_path以及从模板路径解析出的width、height。/frame/render还会先调用resolve_template_path模板不存在时抛错模板没找到是最常见的失败原因。方式二Web 界面预览在 Web 界面进入模板配置区style_config.py按类型static/image/video在模板图库中点击选择你的新模板界面会显示该模板的视频尺寸展开模板预览折叠区填入标题、正文和图片路径预览图片默认值resources/example.png点击预览按钮。渲染成功后界面显示预览图片和文件路径失败则显示具体错误信息。这一步走的就是HTMLFrameGenerator.generate_frame与正式生成视频时合成帧用的是同一套渲染逻辑预览效果即为成片帧效果。在正式生成视频时使用新模板三条使用入口按需选其一或组合1. Web 界面模板选定后会随任务提交无需额外配置。2. 配置文件把 config.example.yaml 复制为config.yaml后在template节设置默认模板template: default_template: 1080x1920/image_default.html把值改成你的模板路径尺寸目录/文件名.html格式未显式指定模板的生成任务就会用它。3. API 视频生成请求请求体中支持frame_template和template_params字段见 api/schemas/video.py 的字段定义与示例例如{ frame_template: 1080x1920/image_default.html, template_params: { accent_color: #ff0000 } }模板路径支持多种写法只写文件名时按默认尺寸1080x1920解析尺寸/文件名.html、templates/尺寸/文件名.html也可以。排查与限制模板找不到resolve_template_path找不到模板时会抛出Template not found并列出该尺寸下可用的模板列表。注意解析顺序是先查自定义目录data/templates/再查内置templates/见 template_util.py 的get_template_full_path与resolve_template_path注释把新文件放进data/templates/1080x1920/也能被识别且覆盖同名内置模板适合不想动内置templates/目录的场景。尺寸解析失败目录名不是宽度x高度格式、或直接放在templates/根下parse_template_size会抛ValueError报错信息里带期望格式说明。Web 界面上看不到新模板先确认文件名以static_、image_、video_开头且所在目录名是标准尺寸格式界面图库只列出符合命名约定的模板。image_/video_模板必须配好对应媒体生成能力ComfyUI 工作流或 API 模型static_模板则跳过媒体生成环节无需任何生成配置。更多模板开发问题文档指向项目的 GitHub Issues 讨论见 templates.md 末尾。【免费下载链接】Pixelle-Video AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考