Pixelle-Video 视频模板开发完全指南:从内置模板到自定义 HTML 模板

发布时间:2026/9/11 2:10:07

Pixelle-Video 视频模板开发完全指南:从内置模板到自定义 HTML 模板 Pixelle-Video 视频模板开发完全指南从内置模板到自定义 HTML 模板【免费下载链接】Pixelle-Video AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video本指南系统讲解 Pixelle-VideoAI 全自动短视频引擎中视频模板的设计体系与开发方法模板以 HTML 定义视频画面的布局与样式通过 Playwright 无头浏览器渲染为帧图像。读完本文你将掌握模板命名规范、内置模板全览、模板变量与自定义参数 DSL、创建自定义模板的完整流程以及尺寸适配、排版、图片处理与性能优化等实战技巧。模板简介HTML 即画面在 Pixelle-Video 中视频模板使用 HTML 定义视频画面的布局和样式每个分镜的画面都是一个由模板渲染出的帧Frame。模板负责承载标题、正文文本、AI 生成的图片或视频背景并决定成片的宽高比与视觉风格。项目内置了覆盖不同视频尺寸和风格需求的预设模板存放于 templates/ 目录下按1080x1920竖屏、1920x1080横屏、1080x1080方形三个尺寸分组。从源码结构看模板渲染由 pixelle_video/services/frame_html.py 中的HTMLFrameGenerator类负责它读取模板文件 → 做变量替换 → 用 Playwright 启动 Chromium 无头浏览器 → 按模板解析出的尺寸设置 viewport → 截图输出 PNG 帧图。而 pixelle_video/services/frame_processor.py 中的FrameProcessor则把HTML 模板合成作为每帧流水线的第 3 步TTS → 图像/视频生成 → 模板合成 → 视频片段最终再与 TTS 音频合并为带旁白的视频片段。内置模板预览竖屏模板1080x1920适用于抖音、快手、小红书等短视频平台。以下为内置竖屏模板及其设计定位模板名称文件定位static_defaultstatic_default.html默认静态模板纯文字样式渲染无需 AI 媒体static_excerptstatic_excerpt.html图文摘抄静态模板Blur Cardimage_blur_card.html模糊背景卡片风格适合图文内容展示Cartoonimage_cartoon.html卡通风格适合轻松活泼的内容Defaultimage_default.html默认模板简洁通用Elegantimage_elegant.html优雅风格适合文艺、知性内容Fashion Vintageimage_fashion_vintage.html复古时尚风格适合怀旧主题Life Insightsimage_life_insights.html生活感悟风格适合心灵鸡汤类内容Modernimage_modern.html现代简约风格适合商务、科技内容Neonimage_neon.html霓虹灯风格适合时尚、潮流内容Psychology Cardimage_psychology_card.html心理学卡片风格适合知识科普Purpleimage_purple.html紫色主题适合梦幻、神秘风格Satirical Cartoonimage_satirical_cartoon.html80 年代讽刺漫画风格适合精神类小故事Simple Black Backgroundimage_simple_black.html极简黑色背景适合心灵鸡汤类内容Simple Line Drawingimage_simple_line_drawing.html简笔画适合认知成长类内容Bookimage_book.html图书解读适合科普类内容Long Textimage_long_text.html长文本适合励志鸡汤类内容Excerptimage_excerpt.html图文摘抄适合名人名言Health Preservationimage_health_preservation.html养生窍门适合养生科普内容Life Insights亮色版image_life_insights_light.html人生感悟传递温暖与力量Fullimage_full.html全屏模板适合书单号Healingimage_healing.html治愈模板适合疗愈类内容Video_Defaultvideo_default.html默认动态模板AI 视频背景Video_Healingvideo_healing.html治愈动态模板AI 视频背景以 image_default.html 为样例其结构是典型的标题区 图片区 文本区 页脚四段式布局并利用装饰圆环、L 形角标、侧边圆点等纯 CSS 元素营造简约质感说明内置模板大量使用 CSS 绘制装饰而非依赖图片资源。横屏模板1920x1080适用于 YouTube、B 站等视频平台模板名称文件定位Ultrawide Minimalimage_ultrawide_minimal.html超宽屏极简风格适合桌面端观看Wide Darktechimage_wide_darktech.html暗黑科技风格适合技术、游戏内容Filmimage_film.html电影风格沉浸式体验Fullimage_full.html全屏显示适合书单号Bookimage_book.html图书解读适合科普类内容方形模板1080x1080适用于 Instagram、微信朋友圈等平台模板名称文件定位Minimal Framedimage_minimal_framed.html极简边框风格适合社交媒体分享这些模板的预览图可以在 docs/images/ 目录中找到对应尺寸的子目录如 docs/images/1080x1920/文档站点中的模板预览卡片即引用这些图片。模板命名规范模板文件名前缀决定了该模板在流水线中的媒体行为pixelle_video/utils/template_util.py 中的get_template_type()会依据前缀判断模板类型static_*.html静态模板无需 AI 生成任何媒体内容纯文字样式渲染适合快速生成、低成本场景在 frame_processor.py 中体现为needs_generation frame.image_prompt is not None判断为否、跳过媒体生成步骤直接进入模板合成。image_*.html图片模板使用 AI 生成的图片作为背景/配图调用 ComfyUI 图像生成工作流或直连 API 提供商适合需要视觉配图的内容若模板文件名不遵循static_/image_/video_前缀get_template_type()会给出告警并默认按image类型处理。video_*.html视频模板使用 AI 生成的视频作为背景调用 ComfyUI 视频生成工作流或直连 API 视频工作流创建动态视频内容增强表现力在 frame_processor.py 中is_video_workflow通过工作流名是否含video_或模板类型是否为video判定媒体类型随后决定合成分支视频模板先渲染透明 HTML 叠加层omit_backgroundTrue截图再叠加到视频上最后替换音频。模板结构模板位于 templates/ 目录按尺寸分组templates/ ├── 1080x1920/ # 竖屏 │ ├── static_*.html # 静态模板 │ ├── image_*.html # 图片模板 │ └── video_*.html # 视频模板 ├── 1920x1080/ # 横屏 │ └── image_*.html # 图片模板 └── 1080x1080/ # 方形 └── image_*.html # 图片模板尺寸即路径约定视频尺寸由模板路径中的目录名解析而来。template_util.py 中的parse_template_size()从形如templates/1080x1920/default.html或1080x1920/default.html的路径中提取父目录名并拆分为宽高同时做合法性校验宽高须在 10010000 像素之间。这意味着创建自定义模板时存放它的目录名必须形如WIDTHxHEIGHT这是模板被正确渲染的前提。此外模板查找遵循自定义优先、内置兜底策略resolve_template_path()支持None回退默认1080x1920/image_default.html、纯文件名使用默认尺寸、1080x1920/template.html相对路径以及templates/...旧式路径等多种输入格式get_resource_path()会先查data/templates/再查内置templates/因此你可以在data/templates/下覆盖同名模板或添加自定义模板而不改动仓库文件。创建自定义模板基本步骤从templates/目录复制一个现有模板文件作为起点修改其中的 HTML 与 CSS 样式保存到对应尺寸目录下目录名必须为WIDTHxHEIGHT格式使用.html扩展名在配置config.example.yaml 的template.default_template或 Web 界面中选择该模板名称即可生效。模板变量模板支持以下 Jinja2 风格变量由HTMLFrameGenerator.generate_frame()注入上下文见 frame_html.py变量含义说明{{ title }}视频标题可选取自Storyboard.title{{ text }}当前分镜的文本内容必用取自该帧的narration旁白文本{{ image }}当前分镜的图片有则使用支持相对路径、绝对路径与 HTTP URL需要说明的是模板变量的实际替换由 frame_html.py 中的_replace_parameters()完成正则替换而非真正的 Jinja2 渲染。图片路径在渲染前会被转换为file://URI本地文件或保持原样HTTP/data/file 协议确保无头浏览器能跨源加载。除上述三个预设变量外generate_frame()还通过ext参数注入扩展数据如index帧序号并透传StoryboardConfig.template_params中自定义参数。示例模板以下是一个可直接使用的竖屏静态模板!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 生成图片作为背景只需在合适位置加入img src{{image}}并配合object-fit: cover参考内置的 image_default.html 图片容器写法。自定义参数 DSL让模板可配置Pixelle-Video 的模板系统还支持自定义参数 DSL语法为{{参数名:类型默认值}}由 frame_html.py 中的parse_template_parameters()解析{{param}}→ text 类型无默认值{{paramvalue}}→ text 类型带默认值{{param:type}}→ 指定类型无默认值{{param:typevalue}}→ 指定类型带默认值。支持的参数类型及默认值解析规则见_parse_default_value()类型说明无默认值时的取值text字符串空字符串number数值含小数点按 float否则 int0color颜色自动补全#前缀#000000bool布尔true/1/yes/on视为真falsetitle、text、image、index是预设参数名不会作为自定义参数暴露。实际渲染时若template_params传入了值则优先使用否则回退占位符内默认值再否则使用空字符串。内置模板中已大量使用该 DSL例如 image_default.html 页脚中的{{authorPixelle.AI}}、{{describeOpen Source Omnimodal AI Creative Agent}}、{{brandPixelle-Video}}以及 static_default.html 的{{backgroundhttps://img.alicdn.com/...jpg}}背景图参数——后者意味着你可以通过template_params传入自定义背景图 URL 而无需改动模板文件。这些参数可通过 HTTP API 自动发现api/routers/frame.py 提供的GET /api/frame/template/params?template1080x1920/image_default.html接口会返回模板的media_width、media_height与所有自定义参数的类型、默认值、标签随后在视频生成请求中通过template_params传入实际值参考 api/schemas/video.py 中VideoGenerateRequest.template_params的定义与示例。配置示例在 config.example.yaml 中通过template.default_template设置全局默认模板template: # 默认帧模板决定视频宽高比与布局风格 # - static_*.html: 静态模板无 AI 媒体 # - image_*.html: 图片模板AI 生成图片 # - video_*.html: 视频模板AI 生成视频 default_template: 1080x1920/image_default.html而在 StoryboardConfig 中frame_template字段默认1080x1920/default.html携带尺寸信息决定最终画面尺寸template_params字典则用于覆盖模板自定义参数如{accent_color: #ff0000}。模板开发技巧1. 响应式尺寸确保模板的body或最外层容器尺寸与目标视频尺寸一致竖屏width: 1080px; height: 1920px;横屏width: 1920px; height: 1080px;方形width: 1080px; height: 1080px;渲染时HTMLFrameGenerator会按解析出的尺寸设置浏览器 viewportdevice_scale_factor1因此超出视口的元素会被截断。注意parse_template_size()的尺寸来源于目录名而 frame_html.py 中的get_media_size()还会解析meta nametemplate:media-width content1024这类 meta 标签来决定AI 媒体图/视频的生成分辨率未找到时回退 1024x1024。即画面尺寸与媒体生成尺寸是两个独立维度二者可不同。2. 文本排版使用合适的字体大小和行高确保可读性内置模板正文多在 4248px、行高 1.62.0为文字添加阴影或背景提高对比度如text-shadow、半透明背景卡片控制文本长度避免溢出可配合min-height固定文本区高度或用white-space: pre-line保留旁白中的换行见 static_default.html。3. 图片处理使用object-fit: cover确保图片填充容器内置模板统一采用此写法添加渐变或遮罩层提升文字可读性如static_default.html中的gradient-overlay层考虑图片加载失败的降级方案如使用background参数提供兜底背景图。4. 性能优化避免使用过于复杂的 CSS 动画渲染是单帧截图动画无意义且拖慢渲染优化背景图片大小控制 HTTP 请求资源体积使用系统字体或 Web 安全字体内置模板采用PingFang SC, Source Han Sans, Microsoft YaHei等字体栈避免依赖外部字体加载。模板渲染的运行环境要求模板依赖 Playwright 无头 Chromium 渲染若在 Linux 服务器部署需满足 frame_html.py 中说明的系统依赖安装fontconfig包启动时会用fc-list自检并告警建议安装基础字体Ubuntu/Debian 执行sudo apt-get install -y fontconfig fonts-liberation fonts-noto-cjkCentOS/RHEL 执行sudo yum install -y fontconfig liberation-fonts google-noto-cjk-fonts安装 Playwright 浏览器playwright install --with-deps chromium。缺少中文字体是模板渲染出来是方块字的最常见原因中文字体Noto CJK 系列务必优先安装。更多信息内置模板源码可直接作为开发起点templates/1080x1920/、templates/1920x1080/、templates/1080x1080/模板工具函数尺寸解析、类型判定、路径解析见 pixelle_video/utils/template_util.py模板渲染引擎变量替换、参数解析、Playwright 截图见 pixelle_video/services/frame_html.py帧合成流水线媒体判定、模板合成、片段生成见 pixelle_video/services/frame_processor.py模板相关配置说明见 config.example.yaml 与 docs/zh/user-guide/api.md模板参数查询接口见 api/routers/frame.py。【免费下载链接】Pixelle-Video AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/9/11 2:10:07

数字化工厂的质量与成本控制关键技术解析

1. 质量与成本控制的行业演进脉络十年前我刚入行做生产管理时,质量控制还停留在"事后检验"阶段,成本控制就是简单压价。记得有次供应商交来一批零件,抽检合格率达标就放行了,结果上线装配时才发现尺寸公差累积导致整批产…

2026/9/11 2:10:07

Python在混合配电系统双目标优化中的应用实践

1. 项目背景与核心价值混合配电系统规划是电力行业近年来的重点研究方向。随着可再生能源占比的持续提升,传统配电网面临着经济性与可靠性难以兼顾的挑战。我在参与某省级电网改造项目时深有体会:当光伏渗透率超过30%后,简单的容量叠加反而导…

2026/9/11 2:10:07

MongoDB更新操作符详解:set、inc、push与原子更新

1. MongoDB更新操作深度解析在数据库日常开发中,更新操作是最频繁使用的功能之一。MongoDB作为文档型数据库的代表,提供了比传统关系型数据库更丰富的更新操作符。今天我们就来深入剖析set、inc、push这三个最常用的更新操作符,以及如何实现原…

2026/9/11 3:10:12

一条命令跑起 Android 模拟器:Docker-Android 完整使用教程

一条命令跑起 Android 模拟器:Docker-Android 完整使用教程 【免费下载链接】docker-android Android in docker solution with noVNC supported, video recording and mcp server 项目地址: https://gitcode.com/GitHub_Trending/do/docker-android 想在服务器或 CI 机…

2026/9/11 3:10:12

无人机飞控开发技术栈分层导航图:ROS+PX4+MAVROS+Gazebo协同实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/11 3:10:12

乂度CDM-10便携CD机体验:CD情怀与现代流媒体的融合

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/11 3:10:12

零成本本地AI短剧制作全流程:从一句话到成片

从“一句剧本”到“一部短剧”,这句话听起来像是广告语,但这个周末我真把它跑通了——而且是全程在本地电脑上完成,不花一分钱API费用。我用一句话当起点:“深夜加班的程序员,发现自己写的代码正在一步步删除整座城市的…

2026/9/11 3:10:12

AI不是股神,是研究助理:投资研究中的正确用法实操指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/11 3:05:12

消息查找算法解析:二分查找与有序时间轴上的前驱查询

P15804 这个题号挂在洛谷上,名字是 GESP202603 八级 消息查找。我第一次拿到它的时候,第一反应是:这题不会要写个字符串匹配吧?毕竟“消息查找”四个字里,“查找”最容易被理解成全文本扫描。真正读完题以后发现&#…

2026/9/10 16:39:38

超人会飞不算本事:系统稳定依赖清晰规则与边界设计

开头先不绕弯子。“#斯坦李吐槽dc 所以超人是无缘无故会飞的嘛哈哈哈哈哈哈哈锤哥真是技术人才啊!#雷神 #复联”这类调侃式短标题,第一波冲击力在于它把两个宇宙的角色塞进同一个吐槽箱里,但细想一下就能发现,它真正碰到的根本不是…

2026/9/10 11:16:38

超人VS蜘蛛侠:拆解超级IP的影响力与传播方法论

把“蜘蛛侠 vs 超人”放在 CSDN 上聊,可能很多人第一反应是走错片场了。但如果把这两个角色看成“两个持续运营了 80 多年的文化产品”,你会发现,这场比较本质上是两个不同 IP 策略的长期结果对比:超人赢在定义了整个超级英雄题材…

2026/9/9 16:31:09

基于CNN的调制信号识别:MATLAB实现时频图分类实战

简介:本资源是一套面向通信工程与信号处理方向学习者、研究者的深度学习实践方案,聚焦调制信号自动检测与识别这一典型无线通信任务,解决传统方法依赖人工特征、低信噪比下性能下降等痛点。压缩包共12个文件(10.73MB)&…

2026/9/10 12:32:02

USB Type-C PCB布局分区设计:电源、高速信号与PD协议全攻略

做硬件这行,Type-C接口算是典型的“看着简单,做起来全坑”的东西。光引脚就24个,高低速信号、电源、控制线全部塞在一个小小的连接器里,如果PCB布局不做规划,打样回来基本就是“插上没反应”、“高速掉线”、“静电一打…

2026/9/10 15:19:50

系统编程学习原型如何补齐稳定性边界

系统编程学习原型如何补齐稳定性边界预算有限时&#xff0c;我先优化明显多余的复制&#xff0c;而不是猜测性地换容器。用借用传递只读数据通常就能减少分配&#xff1a; fn parse(line: &str) -> Result<Item, Error> { /* ... */ }用基准确认热点确实在分配&am…

2026/9/10 15:49:53

雨花区哪家财务公司代理记账比较好?

在雨花区&#xff0c;企业处理财税事务常常面临诸多挑战&#xff0c;选择一家靠谱的财务公司至关重要。湖南巨勤财务管理咨询有限公司就是本地正规实体财税服务机构&#xff0c;深耕本地工商财税行业多年&#xff0c;熟悉当地工商局、税务局最新政策与申报流程。主营公司注册、…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
咨询二维码