快制作

主题

Web Material ​

Web material plays web content inside a program. It can open an online web URL, or it can play a web ZIP package uploaded by the user.

Many AI tools can now generate dynamic web pages quickly, such as menu boards, dashboards, welcome screens, and interactive display pages. In the past, this usually required deploying the page to a server and then using its URL. Now you can package the generated web files as a ZIP file, upload it to the media library, and play it on the Player end without deploying a separate server.

Two Source Types ​

Web material supports two source types:

  • Web URL: enter an http:// or https:// URL. The Player end opens this URL directly.
  • Web ZIP Package: upload a ZIP file that contains index.html, CSS, JavaScript, images, and other assets. The Player end downloads the ZIP package and opens the entry page locally.

media_web Web URL mode

What Is a Web ZIP Package? ​

A web ZIP package is a packaged static website. It usually contains at least one entry HTML file, and may also contain stylesheets, scripts, images, fonts, audio, video, and other assets.

A simple structure looks like this:

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

If the page is generated by an AI tool or a frontend framework, the output may look like this:

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

Both structures can work. The important part is to set the correct entry file:

  • If index.html is in the ZIP root, enter index.html
  • If the page is under dist/index.html, enter dist/index.html

media_web_zip Web ZIP Package mode

How to Prepare the ZIP Package ​

If an AI tool generates a single-page HTML file, you usually only need to package index.html together with the images, CSS, and JavaScript files it references.

If the page is a React, Vue, Vite, or similar frontend project, do not upload the full source project directly. Build it first, for example:

bash
npm run build

Then package the build output. Common approaches are:

  • Zip the files inside dist; the entry file is usually index.html
  • Zip the dist folder itself; the entry file is usually dist/index.html

Use relative paths for assets whenever possible, such as ./assets/logo.png. Avoid local absolute paths. This allows the Player end to load images, scripts, and styles after downloading the ZIP package.

Upload and Select a ZIP Package ​

In the web material editing page, choose "Web ZIP Package", then click "Local Upload" to upload a ZIP file, or select an existing ZIP package from "My Gallery".

media_web_zip_gallery Select or upload a web ZIP package

After selecting a ZIP package, enter the page to open in the entry field, such as index.html or dist/index.html. The Player end starts loading the web page from this entry file.

Parameters ​

Stay Time

Controls how long the web material stays on screen.

Fixed web viewport

Enable this if a web page on the Player end is cut off or its layout differs from the preview. It is useful for dashboards and similar pages. It is off by default and applies to online pages and web ZIP packages embedded in a program.

When enabled, the Manager preview and Player end use the same reference width and height to lay out the page, then scale it proportionally to fit its sub-screen. Space is left around the page if the aspect ratios differ.

Reference width (px) / Reference height (px)

These fields appear when "Fixed web viewport" is enabled. The defaults are 1920 wide and 1080 high. Values are in CSS pixels, with a range of 1–4096 for each field. Try the defaults for dashboards, or enter the browser viewport size the page needs for its normal layout.

Auto Scroll

When enabled, the page scrolls automatically based on the configured speed. This is useful for long pages, lists, and announcement pages.

Vertical Scroll / Horizontal Scroll

When auto scroll is off, these values are the initial scroll offsets after the page loads. When auto scroll is on, they are scroll speeds. Positive and negative values control direction.

Transparent Background

Use this when the web page background should reveal content below it. The page itself must also use a transparent background.

Request Desktop View

When enabled, the Player end tries to load the desktop version of the page. Use this when a website's mobile view does not display as expected.

This requests the website's desktop page. To set a fixed layout size, use "Fixed web viewport".

Support Keyboard Control

Enable this if the web page needs keyboard, remote-control, or direction-key interaction, so the page can receive focus.

Open External Browser

When web material is used as a click-event target, this option can open it in an external browser. Normal embedded web playback usually does not need it.

A Page Is Cut Off or Looks Different from the Preview ​

For example, a dashboard may look normal in the Manager preview, but only show the top-left charts on the Player end, with the map and right-hand rankings missing. A smaller browser viewport may have triggered the page's narrow-screen layout.

To adjust it:

  1. Edit the program in the Manager end, select the sub-screen containing the page, and open that web material's editor.
  2. Under "Para Settings", enable "Fixed web viewport". A short explanation also appears below the switch.
  3. Set "Reference width (px)" to 1920 and "Reference height (px)" to 1080, then check the preview. If the page was designed for another size, enter that width and height instead.
  4. Save the program, let the Player end synchronize the updated program, and check whether the page displays in full.

Choosing a reference size

Use the browser viewport size needed for the page's normal layout. It does not need to match the Player end's physical resolution. A page occupying only part of the program can still use a 1920×1080 layout scaled to fit that area.

A fixed web viewport does not automatically shrink an entire long page into one screen. Long pages can still use "Auto Scroll".

Suitable Use Cases for ZIP Packages ​

  • AI-generated dynamic menu boards, welcome screens, or promotion pages
  • Animation pages built with HTML, CSS, and JavaScript
  • Static pages built from frontend frameworks
  • Complex web effects that you do not want to deploy to a server
  • Pages whose assets should be delivered together with the program, reducing reliance on external websites

FAQ ​

The page is blank after uploading the ZIP package ​

Check whether the entry file is correct. For example, if the real path is dist/index.html but the entry field is index.html, the page cannot be found.

Images or styles are not loaded ​

Check the asset paths in HTML. Use relative paths instead of local machine paths such as C:\Users\... or /Users/....

Can I upload a page generated by an AI tool directly? ​

If the AI tool generated a single index.html, you can zip and upload it directly. If it generated a frontend source project, build it into static files first and upload the build output.

Can the web page inside the ZIP request online APIs? ​

Yes, but the Player end must be able to access those network addresses. If the content is fixed, place images, scripts, and styles inside the ZIP package to reduce external dependencies.

How do I update the page later? ​

Package and upload the updated ZIP again, select the new ZIP package in the web material, and save the program. The Player end plays the new web content after synchronization.