本文记录一次“数字人宣讲视频 Flask 展示页”的搭建过程。项目主题是面向青年大学习场景做一个名为“红厅智播”的演示系统先在魔珐星云控制台配置数字人形象、音色和场景再整理 SSML 宣讲脚本生成视频最后用一个简单的 Flask 页面把视频展示出来。整套流程偏轻量重点不是做复杂后台而是把“数字人视频生成”和“网页展示”这两段跑通。适合用来做课程展示、活动介绍、主题宣讲样例或者作为后续扩展系统的雏形。魔珐星云 PC 端官方链接https://xingyun3d.com?utm_campaigndailyutm_sourceCSDNwanfen3utm_mediumutm_termutm_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_DIRos.path.dirname(os.path.abspath(__file__))appFlask(__name__,template_folderBASE_DIR,static_folderNone)app.route(/static/path:filename)defserve_static(filename):returnsend_from_directory(BASE_DIR,filename)这段代码主要做了三件事template_folderBASE_DIR让 Flask 能直接找到根目录下的index.html。static_folderNone关闭 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按 CtrlC 停止服务\n)app.run(host0.0.0.0,port5000,debugTrue)启动后访问http://localhost:5000如果只是本机预览host写127.0.0.1也可以。这里使用0.0.0.0是为了同一局域网内其他设备也能访问。4.3 前端页面结构前端页面保持简洁核心就是一个video标签。bodynavclassnavdivclassnav-logo红/divdivclassnav-name红厅智播small青年大学习数字人制作系统/small/div/navdivclassmaindivclasstagi/iAI 数字人在线制作/divh1红厅智播/h1pclasssub青年大学习 · 数字人智能制作平台/pdivclassplayervideoautoplaymutedloopplaysinlinecontrolssourcesrc/static/xxx.mp4typevideo/mp4/video/div/divfooterclassfootdivclassfoot-line/divp红厅智播 · 青年大学习数字人制作系统/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_campaigndailyutm_sourceCSDNwanfen3utm_mediumutm_termutm_content
