快制作

主题

网页素材 ​

网页素材用于在节目中播放网页内容。它可以直接打开一个在线网页，也可以播放用户上传的网页 ZIP 包。

现在很多 AI 工具都可以快速生成动态网页，比如菜单屏、数据看板、欢迎页、互动展示页等。以前这类网页通常需要部署到服务器后，再把网址填到节目里；现在可以把生成好的网页文件打成 ZIP 包，直接上传到素材库，显示端下载后就能播放，不需要单独准备服务器。

两种素材来源 ​

网页素材有两种来源：

  • 链接 Url：填写一个 http:// 或 https:// 开头的网址，显示端播放时直接访问这个网址。
  • 网页 ZIP 包：上传一个包含 index.html、CSS、JavaScript、图片等文件的 ZIP 包，显示端下载后在本地打开入口页面。

media_web 网页链接模式

什么是网页 ZIP 包 ​

网页 ZIP 包可以理解为“一个打包好的静态网站”。它通常至少包含一个入口 HTML 文件，还可能包含样式、脚本、图片、字体、音频、视频等资源。

最简单的结构如下：

text
menu-screen.zip
├─ index.html
├─ style.css
├─ main.js
└─ assets/
   ├─ logo.png
   └─ background.jpg

如果你使用 AI 工具或前端框架生成网页，常见输出也可能是这样的：

text
menu-screen.zip
└─ dist/
   ├─ index.html
   └─ assets/
      ├─ index.css
      └─ index.js

这两种都可以使用，关键是要在网页素材里填对“入口文件”：

  • ZIP 根目录下有 index.html：入口文件填 index.html
  • ZIP 里有 dist/index.html：入口文件填 dist/index.html

media_web_zip 网页 ZIP 包模式

如何准备 ZIP 包 ​

如果是 AI 工具直接生成的单页 HTML，通常只需要把 index.html 以及它引用的图片、CSS、JS 文件一起压缩成 ZIP 包。

如果是 React、Vue、Vite 等前端项目，不要直接上传完整源码目录。通常应该先执行构建命令，例如：

bash
npm run build

然后把构建产物打包。常见做法有两种：

  • 只压缩 dist 目录里面的文件，这时入口通常是 index.html
  • 连同 dist 目录一起压缩，这时入口通常是 dist/index.html

建议优先使用相对路径引用资源，例如 ./assets/logo.png，不要依赖本机绝对路径。这样显示端下载 ZIP 包后，页面里的图片、脚本和样式才能正常加载。

上传和选择 ZIP 包 ​

在网页素材编辑页选择“网页 ZIP 包”，然后点击“本地上传”上传 ZIP 文件，或者从“我的素材库”里选择已经上传过的 ZIP 包。

media_web_zip_gallery 选择或上传网页 ZIP 包

选择 ZIP 包后，在入口文件输入框中填写要打开的页面，例如 index.html 或 dist/index.html。显示端播放时会从这个入口文件开始加载网页。

参数说明 ​

停留时间

控制网页素材显示多久。多个素材轮播时，到达停留时间后切换到下一个素材。

自动滚动

开启后，网页会按照设置的速度自动滚动。适合长页面、列表页或公告页。

纵向滚动 / 横向滚动

自动滚动关闭时，它表示网页加载后的初始偏移位置；自动滚动开启时，它表示滚动速度。正负值决定滚动方向。

背景是否透明

用于希望网页背景透出下层内容的场景。网页本身也需要使用透明背景，否则效果不明显。

是否请求桌面版

开启后，显示端会尽量按桌面网页方式加载。用于某些网站在移动视图下显示不符合预期的情况。

需要按键控制

如果网页内部需要键盘、遥控器或方向键交互，可以开启这个选项，让网页获得焦点。

打开外部浏览器

当网页素材作为点击跳转目标时，可以选择是否使用外部浏览器打开。普通节目内嵌网页通常不需要开启。

适合使用 ZIP 包的场景 ​

  • AI 生成的动态菜单屏、欢迎屏、促销页
  • 使用 HTML、CSS、JavaScript 制作的动画页面
  • 使用前端框架构建出来的静态页面
  • 不想部署服务器，但希望播放一个复杂网页效果
  • 希望页面资源跟随节目一起下发，减少对外部网站的依赖

常见问题 ​

上传 ZIP 包后页面空白 ​

优先检查入口文件是否填写正确。比如 ZIP 里实际路径是 dist/index.html，但入口只填了 index.html，就会找不到页面。

图片或样式没有加载出来 ​

检查 HTML 中引用的资源路径。建议使用相对路径，不要使用本机路径，例如 C:\Users\... 或 /Users/...。

AI 生成的网页可以直接上传吗？ ​

如果 AI 工具生成的是单个 index.html，可以直接压缩上传。如果生成的是前端项目源码，需要先构建成静态文件，再上传构建产物。

ZIP 包里的网页能联网请求接口吗？ ​

可以写联网逻辑，但显示端必须能访问对应网络地址。如果只是播放固定内容，建议尽量把图片、脚本和样式都放进 ZIP 包，减少外部依赖。

修改网页后怎么更新？ ​

重新打包 ZIP 并上传，替换网页素材中选择的 ZIP 包，然后保存节目。设备同步节目后会播放新的网页内容。