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-07-07 16:02:31 +08:00
parent b740e400c9
commit ecb41269cd
7 changed files with 901 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
template_example.html
+302
View File
@@ -0,0 +1,302 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ========== 全局重置：去掉浏览器默认边距 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ========== 画布尺寸 ========== */
/*
width / height：最终视频的输出分辨率
- 当前 1080 x 1920 是竖屏 9:16（手机全屏）
- 想改分辨率就改这两个数字
例如 720 x 1280 就是 720p 竖屏
- overflow: hidden → 超出画布的部分裁掉，不会出滚动条
- background: #000 → 背景黑色，视频没铺满时露出的颜色
*/
body {
width: 1080px;
height: 1920px;
overflow: hidden;
background: #000;
}
/* .clip：所有元素都要有这个 class，才能用 left/top 精确控制位置 */
.clip { position: absolute; }
/* .text-element：所有文字元素都要有这个 class */
.text-element {
font-family: Arial, Helvetica, sans-serif; /* 字体 */
text-align: center; /* 文字水平居中 */
display: flex; /* 弹性盒子布局（不用管） */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
white-space: pre-wrap; /* 保留换行符，文字超出自动换行 */
word-break: break-word; /* 长单词撑破时强制换行 */
}
/* ========== 入场动画 ========== */
/* 给元素加上 class="anim-xxx" 就能用对应的动画效果 */
/*
动画时长怎么改？
数字越小动画越快，越大越慢
例如 0.5s → 改成 1s 就慢一倍，改成 0.2s 就快一倍
*/
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.anim-fadeIn { animation: fadeIn 0.5s ease-out; }
.anim-slideUp { animation: slideUp 0.6s ease-out; }
.anim-slideLeft { animation: slideLeft 0.6s ease-out; }
.anim-scaleIn { animation: scaleIn 0.5s ease-out; }
.anim-pulse { animation: pulse 1.5s ease-in-out infinite; }
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
</head>
<body>
<!--
======================================================================
id="stage" → 舞台容器，所有元素都放在这里面
重要属性说明：
data-composition-id="main" → 不要改，程序内部标识
data-width / data-height → 必须和上面 body 的宽高一致
======================================================================
-->
<div id="stage" data-composition-id="main" data-start="0" data-width="1080" data-height="1920">
<!--
======================================================================
★ data-key 属性 ★
每个元素必须有一个 data-key 属性，程序会根据 data-key 的名字，
把你传的 data 数据替换到元素内容上。
例如：
模板里 <div data-key="title">标题文字</div>
你传参时 data: { "title": "你好世界" }
程序就会把"标题文字"替换成"你好世界"
★ data-start / data-duration 属性 ★
data-start="0" → 第 0 秒开始显示
data-duration="0" → 持续显示到视频结束（0=一直显示）
★ data-track-index 属性 ★
控制元素的前后层级，数字越大越靠前（盖住数字小的）
track-index=0 是背景视频专用，其他元素从 1 开始
======================================================================
-->
<!--
======================================================================
data-key="title" 标题
最终效果：居中靠上，红色大字
======================================================================
★ 你可以改下面这些参数来调整效果 ★
left: 50% + transform: translateX(-50%)
水平居中，不要改
top: 70px
距离顶部 70 像素
→ 改大数字，标题往下移；改小数字，标题往上移
font-size: 48px
字号（字体大小）
→ 改大数字，字变大；改小数字，字变小
color: #D82828
文字颜色，十六进制颜色码
→ 常见颜色：
#FFFFFF = 白色 #000000 = 黑色
#D82828 = 红色 #333333 = 深灰
→ 也可以直接写英文 red / white / black
-->
<div data-key="title" data-start="0" data-duration="0" data-track-index="1"
class="clip text-element"
style="
left: 50%;
top: 70px;
transform: translateX(-50%);
font-size: 48px;
color: #D82828;
">标题文字</div>
<!--
======================================================================
data-key="product_image_1" 产品图片
注意：这是 <img> 图片标签，不是文字
★ 可调参数 ★
width: 200px / height: 200px
图片的宽和高
→ 改大图片变大，改小图片变小
left: 0px
距离左边 0 像素（贴左边缘）
→ 改大数字，图片往右移
top: 200px
距离顶部 200 像素
→ 改大数字，图片往下移；改小数字，图片往上移
提示：
如果你有多张产品图片，可以复制这个元素，
把 data-key 改成 product_image_2、product_image_3 ...
然后在传参时给对应的 key 传不同的图片 URL
-->
<img data-key="product_image_1" data-start="0" data-duration="0" data-track-index="2"
class="clip"
style="
width: 200px;
height: 200px;
left: 0px;
top: 200px;
"
src="占位图片.jpg" />
<!--
======================================================================
data-key="product_desc" 产品卖点描述（第一行）
★ 可调参数 ★
top: 830px
距离顶部 830 像素
→ 改大数字，文字往下移；改小数字，文字往上移
font-size: 34px
字号
→ 改大字变大，改小字变小
color: #333333
文字颜色
→ #333333 = 深灰色
→ 改成 #000000 就是纯黑色
→ 改成 #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;
">产品卖点描述</div>
<!--
======================================================================
data-key="product_info" 产品信息（第二行描述，更靠下的位置）
用法和上面的 product_desc 一样，只是位置不同
★ 可调参数 ★
top: 950px
距离顶部 950 像素
→ 比 product_desc 更靠下
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
字号
color: #FFFFFF
文字颜色（白色）
★ 下面 <span> 标签里的样式 ★
background: rgba(0, 0, 0, 0.70)
黑底半透明背景
→ 括号里前三个数字 0,0,0 是黑色（改成 255,255,255 就是白色底）
→ 最后一个数字 0.70 是不透明度
1.0 = 完全不透明（纯黑底）
0.5 = 半透明
0.0 = 完全透明（看不见背景）
padding: 12px 24px
背景的内边距
→ 上下 12px，左右 24px
→ 改大数字，背景范围变大（文字周围的空隙变大）
→ 改小数字，背景范围变小
border-radius: 8px
背景圆角
→ 改大数字（如 20px），圆角更明显
→ 改成 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;
color: #FFFFFF;
">
<span style="background:rgba(0,0,0,0.70); padding:12px 24px; border-radius:8px;">
免责声明文字
</span>
</div>
</div>
<!--
======================================================================
以下脚本不要改，这是程序内部使用的 GSAP 时间轴初始化
======================================================================
-->
<script>
(function() {
var tl = gsap.timeline({ paused: true });
tl.to('#stage', { duration: 0, opacity: 1 }, 0);
window.__timelines = window.__timelines || {};
window.__timelines['main'] = tl;
})();
</script>
</body>
</html>