Step-by-Step Guide to Creating HTML Videos with WorkBuddy

Have you come across explainer videos where the entire visual flow resembles an animated HTML slideshow?

We recently explored HyperFrames, which operates on the same principle: generating visuals from HTML and compositing them into video. This led us to consider whether HTML could handle the frontend visuals while HyperFrames manages the timeline and rendering.

Following this approach, we successfully recreated similar videos using WorkBuddy.

Let’s watch two final videos first. Can you tell which one was made with WorkBuddy?

Video 1:
Video 2:

The entire workflow consists of 4 steps: script, audio, SRT subtitle file, and HTML video.

The script, voiceover, and SRT allow you to generate HTML visuals synchronized sentence by sentence, which can then be directly rendered into MP4.

Before we begin, make sure you have all the necessary tools and assets ready.

01. Before Starting: Tool Preparation

An AI Agent: WorkBuddy, Codex, or Claude Code
HyperFrames: For rendering HTML frames into MP4
Jianying (CapCut): For subtitle recognition, exporting MP3 voiceover recordings, and generating SRT files
Node.js 22+: For running HyperFrames (AI can help with setup)
FFmpeg: For final video encoding (AI can help with setup)

Once you have these tools, you’ll also need three assets before generating the video:
These are all the tools you need. Now let’s dive into what makes this method truly clever.

02. SRT Provides a “Schedule” for Visuals

In typical AI video creation, you input the entire script and let the AI guess how long each slide should display.

If the timing is right, that’s great. But when it’s not, the voiceover might already move to the next segment while the visual is stuck on the previous slide, or the title might disappear before a sentence is finished.

This method removes guesswork by directly providing the SRT file to the AI.

Once the AI receives it, it’s like having a detailed visual schedule. It can precisely determine when each card appears and which second to transition to the next scene, all anchored to specific timestamps.

03. Step One: Write a “Visual-Ready” Script

First, write the script without worrying about animations at this stage.

Here’s a tip: aim for each paragraph to have a clear visual focus.

For example, take this sentence: “The entire process consists of four steps: script, audio, subtitles, and HTML rendering.”

It naturally translates into a “Four-Step Process” visual. After writing the script, read it aloud to catch any awkward phrasing and adjust accordingly.

If you wait until after recording the audio to tweak the script, all timestamps will need to be redone.

04. Step Two: Record Audio to Set the Rhythm

Next, work on the audio.

You can record it yourself or use AI voiceover. Tools like phone recording, Jianying, or other AI voice generators work well.

Once recorded, trim obvious mistakes, long pauses, and unnecessary silences. However, don’t cut too aggressively—give the audience enough time to read the on-screen text.

05. Step Three: Export the SRT File

Use Jianying’s “Auto Captions” feature to generate subtitles.

After generation, proofread each line carefully. Terms like HyperFrames or WorkBuddy are often misrecognized, so double-check them.

Then review the subtitle segmentation. Overly long captions can lead to overcrowded screens. We want clear timing points, not a transition for every comma.

Once verified, export the file as xxx.srt.

Open it with a text editor to confirm it includes sequence numbers, start/end times, and text. This “visual schedule” is now complete.

At this point, the preparation is done. Now, watch how the three assets come together visually.

06. Step Four: Hand Over Assets to WorkBuddy

Integrate HyperFrames into WorkBuddy with a single command.

Set up the workspace by creating a dedicated folder with a structure like this:

Place the voiceover, SRT file, and reference images in the input folder.

Use the “Set Workspace” option to select the entire AI_voiceover folder, then set the working mode to Plan and the model to auto.

Next, paste the following prompt into WorkBuddy:

WorkBuddy might ask about your preferred style later. Choose based on your preferences:

Once rendering is complete, open the preview.

You now have a complete video—no screen recording or manual sliding required. HyperFrames reads the HTML frame by frame according to the timeline and encodes it into MP4.

07. Reusable HTML Templates

By now, you’ve produced a video demo. The first version might need adjustments and may not be faster than manual editing. However, once polished, the HTML can be saved as a template for future use.

For the next similar video, only provide the AI with three things:

Then tell it:

From now on, just swap the script, voiceover, and SRT—the same visual style can be applied repeatedly.

08. Final Notes

Today’s AI can generate HTML with sufficient capability to implement various motion effects at the code level. Reference images are crucial, as the AI will generate frontend effects based on their style.

Before publishing, always verify copyright compliance to avoid legal issues.

This workflow is especially suited for knowledge explainers, product introductions, and faceless voiceover videos.

If you want to add a human touch, record a live-action voiceover video, extract the script from it, and follow the steps above to create a knowledge explainer with a real person on screen.

Welcome to follow WanXiang AI Lab, helping you make the most of AI tools.