《如何搭建：“数字人宣讲视频 + Flask 展示页”的演示系统》
本文记录一次“数字人宣讲视频 + Flask 展示页”的搭建过程。项目主题是面向青年大学习场景做一个名为“红厅智播”的演示系统：先在魔珐星云控制台配置数字人形象、音色和场景，再整理 SSML 宣讲脚本生成视频，最后用一个简单的 Flask 页面把视频展示出来。
整套流程偏轻量，重点不是做复杂后台，而是把“数字人视频生成”和“网页展示”这两段跑通。适合用来做课程展示、活动介绍、主题宣讲样例，或者作为后续扩展系统的雏形。
魔珐星云 PC 端官方链接：
https://xingyun3d.com?utm_campaign=daily&utm_source=CSDNwanfen3&utm_medium=&utm_term=&utm_content=一、项目背景与目标
1.1 为什么要做这个项目
青年大学习这类主题内容通常有固定的表达规范，也有比较明确的视觉调性。如果每次都从拍摄、配音、剪辑开始做，流程会比较重，尤其是基层组织或小团队，很容易卡在时间、人手和制作经验上。
这次项目想解决的不是“大而全的平台问题”，而是一个更具体的需求：
- 有一段主题宣讲文案。
- 希望生成一段统一风格的数字人讲解视频。
- 希望再做一个简洁网页，用于播放和展示这段视频。
所以整个系统的目标很清楚：先完成一次可复用的制作链路，再把最终视频放到网页里展示出来。
1.2 数字人在这里承担什么角色
数字人的作用可以理解成“统一出镜形象 + 自动配音口型 + 虚拟场景合成”。它不能替代内容策划本身，但可以把重复性的出镜、录音、剪辑流程压缩掉。
在这个项目里，数字人主要承担三件事：
- 用固定形象保持每期内容风格一致。
- 根据文案自动生成语音和口型动画。
- 搭配红色主题场景，形成比较完整的宣讲画面。
这种方式适合做样片、预热视频、主题内容入口页。如果要正式长期使用，仍然建议对文案审核、视频复核、素材归档这些环节做流程管理。
1.3 “红厅智播”的范围
“红厅智播”这里不是一个复杂的内容管理系统，而是一个最小可运行版本：
- 在魔珐星云控制台配置数字人形象、音色和红色党政场景。
- 编写青年大学习主题的 SSML 宣讲脚本。
- 生成数字人宣讲视频。
- 用 Flask 搭建一个亮色红色主题页面，嵌入并循环播放视频。
后续如果要扩展，可以再加视频列表、分类管理、在线编辑文案、接口生成视频等功能。
二、前提准备：魔珐星云平台配置
正式写代码前，需要先把数字人视频生成部分准备好。这里用到的是魔珐星云控制台，主要配置应用、人物、音色和场景。
1. 创建视频应用
登录魔珐星云控制台后，进入应用管理，新建一个视频应用。应用名称可以写成类似“红厅智播-青年大学习”的形式，方便后面区分。
创建完成后，平台会生成APP_ID和APP_SECRET。如果只是手动生成视频，可以先不用接口；如果后续要接入自动生成流程，这两个参数会用到。
2. 配置人物形象
进入应用详情页，打开“形象管理”，选择适合宣讲类内容的数字人形象。
本项目使用的形象 ID 是：
AF027_9161_new选择形象时主要看三点：着装是否正式、表情是否自然、整体气质是否适合主题宣讲。不要只看模型精细度，和场景、音色是否协调也很重要。
3. 配置音色
在“音色管理”中选择一款语速适中、吐字清楚的音色。主题宣讲不适合过于夸张的语气，稳定、清晰比“有表演感”更重要。
本项目使用的音色 ID 是：
XMOV_HN_TTS__40如果文案比较长，建议先用一小段文本试听，确认停顿、重音和语速都能接受，再生成完整视频。
4. 配置场景
场景选择“红色简约党政新闻厅 B”。这类场景不需要太花，重点是背景干净、主体突出、颜色和主题一致。
配置完成后，把场景 ID 也记录下来。后面如果要批量生成视频，人物、音色和场景 ID 可以作为固定配置复用。
5. 编写 SSML 脚本并生成视频
文案可以按段落拆成 SSML 脚本。这里的结构比较简单，每段对应一个 JSON 对象，text放播报内容，media_url可以先留空。
[{"text":"各位青年朋友们大家好，欢迎收看本期青年大学习主题宣讲。青年是国家的未来、民族的希望，新时代赋予青年全新的使命与担当，坚定理想信念、筑牢思想根基，是当代青年成长成才的必修课。","media_url":""},{"text":"新时代青年要自觉加强理论学习，深刻领悟时代精神，紧跟党的步伐，树立远大理想，把个人青春理想融入国家发展大局，摒弃浮躁心态，脚踏实地锤炼本领、增长才干。","media_url":""},{"text":"我们要勇于担当、锐意进取，在学习中精进自我，在实践中磨砺初心，积极投身志愿服务、社会实践与时代建设，以奋斗姿态不负韶华、不负时代，争做有理想、敢担当、能吃苦、肯奋斗的新时代好青年。","media_url":""}]这里有两个小经验：
- 长文案不要一整段塞进去，按自然语义拆成几段，数字人的停顿会更舒服。
- 先用短稿生成一次预览，确认音色、口型和场景没有问题，再生成完整版本。
生成时选择已经配置好的人物、音色和场景，粘贴脚本后点击“3D 生成”。渲染完成后下载.mp4文件，放到项目目录中，后面的网页会直接读取这个视频。
三、技术架构与项目结构
3.1 整体架构
这个项目可以拆成三个阶段：平台配置、视频生成、网页展示。前两步在魔珐星云控制台完成，最后一步用 Flask 做一个本地 Web 页面。
配置数字人形象 / 音色 / 场景 ↓ 整理 SSML 宣讲脚本 ↓ 生成数字人视频 ↓ 下载 MP4 文件 ↓ Flask 提供页面和视频访问 ↓ 浏览器打开红厅智播展示页这种架构的优点是简单，缺点也很明显：视频生成和网页展示还是分开的。如果要做成正式系统，可以继续把生成接口、任务状态、视频列表和权限管理补上。
3.2 项目结构
项目文件不多，核心就是一个 Flask 文件和一个 HTML 页面。
数字人视频生成网页版/ ├── web_app.py # Flask 服务：首页和视频文件访问 ├── index.html # 前端展示页 ├── requirements.txt # Python 依赖 └── *.mp4 # 生成后的数字人视频文件这里没有引入前端框架，也没有做数据库。原因很简单：当前目标只是展示视频，纯 HTML + CSS 已经够用。
四、从 0 到 1 搭建红厅智播
红厅智播网页本质上是一个视频展示页：顶部有项目名称，中间放视频播放器，底部做简单收尾。页面不做复杂交互，重点是保证视频能稳定加载，视觉上和主题统一。
4.1 Flask 应用初始化与静态文件路由
后端使用 Flask。这里没有把视频放进static/目录，而是直接从项目根目录读取，所以需要自定义一个静态文件路由。
fromflaskimportFlask,render_template,send_from_directoryimportos BASE_DIR=os.path.dirname(os.path.abspath(__file__))app=Flask(__name__,template_folder=BASE_DIR,static_folder=None)@app.route('/static/<path:filename>')defserve_static(filename):returnsend_from_directory(BASE_DIR,filename)这段代码主要做了三件事：
template_folder=BASE_DIR：让 Flask 能直接找到根目录下的index.html。static_folder=None：关闭 Flask 默认静态目录，避免它只去static/文件夹找资源。/static/<path:filename>：自定义文件访问路径，用来读取根目录里的.mp4文件。
如果视频地址写成/static/xxx.mp4，但没有这段自定义路由，就很容易遇到 404。
4.2 首页路由与启动服务
首页只负责渲染index.html，没有额外接口。
@app.route('/')defindex():returnrender_template('index.html')if__name__=='__main__':print("="*60)print("红厅智播 - 青年大学习数字人制作系统")print("="*60)print("\n访问地址: http://localhost:5000")print("\n按 Ctrl+C 停止服务\n")app.run(host='0.0.0.0',port=5000,debug=True)启动后访问：
http://localhost:5000如果只是本机预览，host写127.0.0.1也可以。这里使用0.0.0.0，是为了同一局域网内其他设备也能访问。
4.3 前端页面结构
前端页面保持简洁，核心就是一个video标签。
<body><navclass="nav"><divclass="nav-logo">红</div><divclass="nav-name">红厅智播<small>青年大学习数字人制作系统</small></div></nav><divclass="main"><divclass="tag"><i></i>AI 数字人在线制作</div><h1>红厅智播</h1><pclass="sub">青年大学习 · 数字人智能制作平台</p><divclass="player"><videoautoplaymutedloopplaysinlinecontrols><sourcesrc="/static/xxx.mp4"type="video/mp4"></video></div></div><footerclass="foot"><divclass="foot-line"></div><p>红厅智播 · 青年大学习数字人制作系统</p></footer></body>几个属性需要注意：
autoplay：页面加载后自动播放。muted：静音，避免浏览器拦截自动播放。loop：循环播放，适合展示页。playsinline：移动端尽量在页面内播放。controls：保留播放控制条，方便手动暂停和调整进度。
实际使用时，把xxx.mp4改成项目目录里的视频文件名即可。
4.4 亮色红色主题 CSS
视觉上采用浅色背景和红色主色，不做太多复杂装饰。这样既能贴合主题，也不会抢视频主体的注意力。
body{background:linear-gradient(135deg,#FFF5F5 0%,#FFE8E8 50%,#FFF0F0 100%);color:#333;}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 20% 30%,rgba(212,33,61,0.08)0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(245,197,24,0.06)0%,transparent 50%);}h1{font-size:3.5em;font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,#D4213D 0%,#F03655 50%,#F5C518 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}.player{width:100%;max-width:900px;border-radius:16px;overflow:hidden;border:2px solidrgba(212,33,61,0.15);box-shadow:0 20px 50pxrgba(212,33,61,0.15);background:#fff;}.nav{background:rgba(255,255,255,0.95);backdrop-filter:blur(16px);border-bottom:1px solidrgba(212,33,61,0.1);box-shadow:0 2px 20pxrgba(212,33,61,0.08);}这套样式里，背景、标题、播放器边框和导航栏都围绕红色展开，但整体亮度比较高，不会显得沉重。移动端可以再配合@media (max-width: 768px)调整标题大小、上下间距和播放器宽度。
五、总结
这次项目的核心收获是：如果目标只是把数字人宣讲视频做出来并展示，流程可以很轻，不一定一开始就上复杂后台。
实际链路可以概括成：
确定主题文案 → 配置数字人形象、音色、场景 → 编写并测试 SSML → 生成 MP4 视频 → 用 Flask 页面展示项目目前的亮点在于结构简单、容易复现、展示效果直观。它也有明显的扩展方向，比如：
- 增加多视频轮播。
- 增加不同主题分类。
- 接入接口生成视频。
- 做一个后台用于上传视频和维护文案。
- 增加审核流程，避免内容直接发布。
如果只是做一次青年大学习主题展示，这个版本已经够用；如果要长期运营，就需要把内容管理、生成任务、权限和素材归档补齐。
魔珐星云 PC 端官方链接：
https://xingyun3d.com?utm_campaign=daily&utm_source=CSDNwanfen3&utm_medium=&utm_term=&utm_content=