red-future/media
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整模板渲染模式

Browse Source
This commit is contained in:
lmk
2026-08-17 17:36:09 +08:00
parent a785930f21
commit dca668a56b
5 changed files with 532 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
template_example.html
+153 -88
View File
@@ -13,6 +13,9 @@
- 当前 1080 x 1920 是竖屏 9:16（手机全屏）
- 想改分辨率就改这两个数字
例如 720 x 1280 就是 720p 竖屏
- 注意：这里只是"预览用"尺寸，实际渲染时画布高度会跟随
你上传的视频分辨率变化，所以模板里贴底/贴右请用 calc(100% - Npx)，
不要写死像素值。
- overflow: hidden → 超出画布的部分裁掉，不会出滚动条
- background: #000 → 背景黑色，视频没铺满时露出的颜色
*/
@@ -89,7 +92,34 @@ body {
★ data-track-index 属性 ★
控制元素的前后层级，数字越大越靠前（盖住数字小的）
track-index=0 是背景视频专用，其他元素从 1 开始
======================================================================
★★ 渲染器 CSS 支持范围（写模板前必看，避免踩坑）★★
模板只是一份"配置"，服务端会把它解析成有限的元素模型，再重新生成
HTML 渲染，因此不是所有 CSS 都会被保留。请遵守以下规则：
1. 定位支持：left / right / top / bottom 关键字、纯像素值、
calc(...) 表达式；文字支持 writing-mode: vertical-rl 竖排。
2. ★ 不要用 bottom: Npx 给"有高度"的元素定位 ★
它会被翻译成 top: calc(100% - Npx)，把元素顶边放到画布
100%-N 的位置，图片会整体掉出画面（表现为"图片丢失"）。
想让元素贴底，请写 top: calc(100% - 元素高度px)；
想离底 Npx，请写 top: calc(100% - 元素高度px - Npx)。
3. ★ right: Npx 的偏移量会被忽略 ★（等价 right:0，直接贴右边）
想让元素距右边 Npx，请写 left: calc(100% - Npx - 元素宽度px)。
4. 竖排文字配 top: 50% + transform: translateY(-50%) 可垂直居中；
水平居中仍用 left: 50% + transform: translateX(-50%)。
5. 文字描边支持 -webkit-text-stroke: Npx #000000
（例如白字一圈黑边：-webkit-text-stroke: 1px #000000。
★ 描边别太粗：中文字笔画细，28px 字号下 3px 描边会把白色
填充盖成黑字；1px 稳妥，想明显可加到 2px。）
6. 文字也支持 width（模板指定 width 可覆盖渲染端的默认宽度，
精确控制换行范围，如把文字限定在两张图片之间不压图）。
======================================================================
-->
<!--
@@ -104,8 +134,8 @@ body {
left: 50% + transform: translateX(-50%)
水平居中，不要改
top: 70px
距离顶部 70 像素
top: 320px
距离顶部 320 像素
→ 改大数字，标题往下移；改小数字，标题往上移
font-size: 48px
@@ -123,7 +153,7 @@ body {
class="clip text-element"
style="
left: 50%;
top: 70px;
top: 320px;
transform: translateX(-50%);
font-size: 48px;
color: #D82828;
@@ -131,7 +161,7 @@ body {
<!--
======================================================================
data-key="product_image_1" 产品图片
data-key="product_image_1" 产品图片（底部左边）
注意：这是 <img> 图片标签，不是文字
@@ -140,14 +170,20 @@ body {
width: 200px / height: 200px
图片的宽和高
→ 改大图片变大，改小图片变小
→ 改高度时，下面 top: calc(100% - 200px) 里的 200 也要跟着改，
保持等于图片高度，图片才会正好贴底。
left: 0px
距离左边 0 像素（贴左边缘）
left: 200px
距离左边 200 像素（图片不在贴左边缘，而是往中间收）
→ 改大数字，图片往右移
top: 200px
距离顶部 200 像素
→ 改大数字，图片往下移；改小数字，图片往上移
top: calc(100% - 200px)
距离顶部 = 画布高度 - 200px，即图片贴住底部
（100% 是父容器全部高度；200 = 图片高度）
→ 注意：这里不能用 bottom: 0px！会被解析器翻译成
top: calc(100% - 0px)，把图片顶边放到画布最底，图片就
整块掉出画面了（这就是之前"图片丢失"的原因）。
→ 想离底部 Npx，写成 calc(100% - 200px - Npx)
提示：
如果你有多张产品图片，可以复制这个元素，
@@ -159,127 +195,156 @@ body {
style="
width: 200px;
height: 200px;
left: 0px;
top: 200px;
left: 1px;
top: calc(100% - 200px);
"
src="占位图片.jpg" />
<img data-key="product_image_2" data-start="0" data-duration="0" data-track-index="2"
class="clip"
style="
width: 100px;
height: 100px;
right: 1px;
top: calc(100% - 200px);
"
src="占位图片.jpg" />
<!--
======================================================================
data-key="product_desc" 产品卖点描述（第一行）
data-key="product_desc" 产品卖点描述（底部两个图片之间）
最终效果：
- 白字，水平居中，落在 product_image_1 与 product_image_2 之间的空隙里
- width: calc(100% - 320px) 让文字宽度随画布自适应，正好落在两图空隙内，
任何分辨率下都不会压到图片
- 因为 image_2 图片比较小（比 image_1 矮，只占上面一段），
文字的前几行会被左右两张图片夹住；后面的几行高度超过 image_2 后，
右侧空出来，文字就能延伸到 image_2 图片的下方显示
★ 可调参数 ★
top: 830px
距离顶部 830 像素
→ 改大数字，文字往下移；改小数字，文字往上移
top: calc(100% - 180px)
文字顶部到画布底部的距离（100% 是父容器全部高度）
→ 改大 180 这个数字，整段文字往上移（更远离底部图片）
→ 改小 180 这个数字，文字往下移
→ 想要"前几行被两张图夹住、后几行落到 image_2 下方"，
就把这个数字控制在 100~200 之间（两张图都从距底 200px 处开始）
width: calc(100% - 320px)
文字宽度 = 画布宽 - 320px
（320 = image_1 宽 200 + image_2 宽 100 + 左右边距各 10px）
→ 渲染端支持模板指定非整数宽度（calc/百分比），不再强制画布 90%
→ 想让文字更宽，把 320 改小；想留更多边距，把 320 改大
left: 210px
距画布左边 210px（image_1 在左边缘宽 200px，210 正好给它右边留 10px）
→ 文字整体往左/往右移，改这个数字
font-size: 34px
字号
→ 改大字变大，改小字变小
color: #333333
文字颜色
→ #333333 = 深灰色
→ 改成 #000000 就是纯黑色
→ 改成 #FFFFFF 就是白色
color: #FFFFFF
文字颜色（白色）
提示：文字内容里可以用 \n 换行
-->
<div data-key="product_desc" data-start="0" data-duration="0" data-track-index="3"
class="clip text-element"
style="
left: 50%;
top: 830px;
transform: translateX(-50%);
font-size: 34px;
color: #333333;
left: 210px;
top: calc(100% - 180px);
width: calc(100% - 320px);
font-size: 17px;
color: #FFFFFF;
">产品卖点描述</div>
<!--
======================================================================
data-key="product_info" 产品信息（第二行描述，更靠下的位置）
data-key="product_info" 产品信息（左边竖排显示）
用法和上面的 product_desc 一样，只是位置不同
最终效果：贴左边缘，文字从上往下竖排显示
★ 可调参数 ★
top: 950px
距离顶部 950 像素
→ 比 product_desc 更靠下
writing-mode: vertical-rl
竖排显示（文字从上往下写）
这是竖排效果的关键，不要删（服务端已支持）
left: 380px
距离左边 380 像素（往中间收）
→ 改大数字，文字往右移
top: 50% + transform: translateY(-50%)
垂直居中，让竖排文字位于左边中间位置
font-size: 28px
字号比第一行略小
color: #444444
文字颜色，比第一行稍浅
-->
<div data-key="product_info" data-start="0" data-duration="0" data-track-index="4"
class="clip text-element"
style="
left: 50%;
top: 950px;
transform: translateX(-50%);
font-size: 28px;
color: #444444;
">第二行描述文字</div>
<!--
======================================================================
data-key="disclaimer" 底部免责声明
最终效果：贴在底部，白字黑底半透明
★ 注意 ★
这个元素内部有一个 <span> 标签，背景色写在 span 上，
程序会自动识别 span 上的背景色并应用到最终视频。
★ 可调参数 ★
top: calc(100% - 45px)
距离底部 45 像素（100% 是父容器的全部高度）
→ 改大 45 这个数字，文字往上移（离底部更远）
→ 改小 45 这个数字，文字往下移（贴底部更近）
font-size: 20px
字号
字号（和 disclaimer 一致）
color: #FFFFFF
文字颜色（白色）
★ 下面 <span> 标签里的样式 ★
-webkit-text-stroke: 1px #000000
文字描边（黑色描边一圈）
→ 描边别太粗：中文字笔画细，3px 会把白色盖成黑字，1px 稳妥
→ 想更明显改成 2px；改成 0 或删掉这行 = 不要描边
-->
<div data-key="product_info" data-start="0" data-duration="0" data-track-index="4"
class="clip text-element"
style="
writing-mode: vertical-rl;
left: 680px;
top: 50%;
transform: translateY(-50%);
font-size: 28px;
color: #FFFFFF;
-webkit-text-stroke: 1px #000000;
">产品信息文字</div>
background: rgba(0, 0, 0, 0.70)
黑底半透明背景
→ 括号里前三个数字 0,0,0 是黑色（改成 255,255,255 就是白色底）
→ 最后一个数字 0.70 是不透明度
1.0 = 完全不透明（纯黑底）
0.5 = 半透明
0.0 = 完全透明（看不见背景）
<!--
======================================================================
data-key="disclaimer" 免责声明（竖排显示）
padding: 12px 24px
背景的内边距
→ 上下 12px，左右 24px
→ 改大数字，背景范围变大（文字周围的空隙变大）
→ 改小数字，背景范围变小
最终效果：竖排显示，白字黑描边
border-radius: 8px
背景圆角
→ 改大数字（如 20px），圆角更明显
→ 改成 0，就是直角
★ 可调参数 ★
writing-mode: vertical-rl
竖排显示（文字从上往下写）
这是竖排效果的关键，不要删（服务端已支持）
left: calc(100% - 730px)
距画布左边 730 像素（竖排文字宽约 30px，当前位于画面偏左）
→ 改大 730 这个数字，整段往左移；改小 → 往右移
→ 注意：这里不能写 right: Npx！偏移量会被解析器忽略，
等价于 right:0（直接贴右边）。
top: 50% + transform: translateY(-50%)
垂直居中，让竖排文字位于中间位置
font-size: 28px
字号（和 product_info 一致）
color: #FFFFFF
文字颜色（白色）
-webkit-text-stroke: 1px #000000
文字描边（黑色描边一圈）
→ 描边别太粗：中文字笔画细，3px 会把白色盖成黑字，1px 稳妥
→ 想更明显改成 2px；改成 0 或删掉这行 = 不要描边
-->
<div data-key="disclaimer" data-start="0" data-duration="0" data-track-index="5"
class="clip text-element"
style="
left: 50%;
top: calc(100% - 45px);
transform: translateX(-50%);
font-size: 20px;
writing-mode: vertical-rl;
left: calc(100% - 730px);
top: 50%;
transform: translateY(-50%);
font-size: 28px;
color: #FFFFFF;
-webkit-text-stroke: 1px #000000;
">
<span style="background:rgba(0,0,0,0.70); padding:12px 24px; border-radius:8px;">
免责声明文字
</span>
</div>
</div>