Render video HTML-first với ak:html-video

Dùng ak:html-video để biến HTML, CSS, JavaScript, template và project asset thành MP4 local qua nexu-io/html-video, headless Chromium cùng FFmpeg. Skill phù hợp với product promo theo template, explainer, data hay social clip, article hoặc repository summary và HTML-first motion prototype.

Chọn video rendering HTML-first

Dùng ak:html-video khi

• Template cùng browser-rendered layout phù hợp với video.
• Bạn cần CLI project, browser preview, Studio editing tùy chọn và MP4 export.
• Copy, screenshot, logo, structured data hoặc project asset khác dẫn dắt scene.
• Bạn muốn inspect HTML được tạo trước khi trả full render cost.

Chọn workflow khác khi

• Bạn cần React cùng Remotion composition code, frame math hoặc Remotion-native rendering. Dùng ak:remotion.
• Bạn chỉ cần transcode, trim, thumbnail, HLS hay DASH hoặc batch FFmpeg. Dùng ak:media-processing.
• Kết quả là page, slide, document, diagram hoặc demo tĩnh không cần MP4. Dùng ak:preview hoặc document workflow phù hợp.
• Bạn chỉ cần browser QA. Dùng ak:agent-browser, hoặc ak:chrome-profile chỉ khi signed-in state thật quan trọng.

Chuẩn bị engine và video brief

Trước khi bắt đầu:

• Hoàn thành Làm quen và xác nhận Engineer Kit đã được cài cho runtime cùng scope hiện tại.
• Xác định audience, goal, duration, aspect ratio, source asset hay URL, template preference, output path và deliverable là draft hay polished export.
• Ưu tiên binary html-video đã publish và có sẵn. Nếu không có, giữ source checkout ngoài target project và đặt HTML_VIDEO_HOME; không vendor upstream engine vào project hay Kit.
• Với source path trong Skill được ship, dùng Node.js 20+, pnpm 9+ và package manager do upstream khai báo. Source build, dependency install và Playwright Chromium download là mutation riêng.
• Chạy html_video doctor cùng html_video list-engines, rồi inspect html_video --help, project-render --help và studio --help. Upstream command có thể tiến hóa độc lập với AgentKit release này.
• Bảo đảm FFmpeg, Chromium, project asset, đủ disk và writable output directory. Review template hay source URL có được phép liên hệ network không.

Tạo video project có giới hạn

/ak:html-video "Create a 12-second 16:9 draft product promo from ./assets/cli-screenshot.png and the headline 'Ship with evidence'; use a discovered template, preview before rendering, write ./artifacts/ship-with-evidence.mp4, make no network asset requests, and do not commit or publish the video"

/ak:html-video "Create a 12-second 16:9 draft product promo from ./assets/cli-screenshot.png and the headline 'Ship with evidence'; use a discovered template, preview before rendering, write ./artifacts/ship-with-evidence.mp4, make no network asset requests, and do not commit or publish the video"

$ak:html-video "Create a 12-second 16:9 draft product promo from ./assets/cli-screenshot.png and the headline 'Ship with evidence'; use a discovered template, preview before rendering, write ./artifacts/ship-with-evidence.mp4, make no network asset requests, and do not commit or publish the video"

Dùng live CLI workflow

Một số template expose variable có thể đặt bằng CLI; template khác có schema trống và cần Studio hoặc project editing. Inspect template trước khi giả định CLI có thể theme nó.

Quan sát các giai đoạn render

1. Skill pin video brief. Audience, message, duration, aspect, asset, output path, quality level và publication boundary được ghi nhận.
2. Skill kiểm tra external engine. Binary hay source checkout đã chọn, current help, Chromium, FFmpeg và writable project storage được xác minh.
3. Skill discover trước khi chọn. Candidate template được tìm và input của template đã chọn được inspect.
4. Skill tạo và cấu hình project. Template, inline text, local file cùng supported variable được gắn vào project ID.
5. Skill preview trong browser. HTML trả về được kiểm tra layout, typography, missing asset, motion, timing, console failure và network use.
6. Skill render qua Chromium cùng FFmpeg. Browser capture scene và FFmpeg encode MP4 tới output path rõ ràng.
7. Skill probe artifact. ffprobe phải báo duration khác zero và video dimension đúng trước khi export được coi là hoàn tất.

Kiểm soát effect của code, network, process và storage

• Clone hay update upstream source dùng network và moving state không pin trừ khi bạn chọn riêng reviewed revision. pnpm install cùng build tạo dependency tree lớn; Playwright install tải Chromium.
• Studio khởi động local server, với port 3071 trong workflow được ship. Chỉ bind và expose theo chủ đích, dừng sau khi dùng và không giả định page an toàn cho shared network.
• Preview và render khởi động browser cùng FFmpeg process, có thể dùng nhiều CPU, memory, disk, temporary file và thời gian. Hãy thử draft ngắn trước.
• Source URL, font, image, script, analytics cùng embedded media có thể tạo external request. Ghi nhận hoặc chặn network effect khi privacy hay reproducibility quan trọng.
• Xác nhận quyền với image, logo, copy, font, audio và template. Skill không cấp publication hay redistribution right.
• Workflow ghi project state, preview file, scratch data và MP4 output. Nó không commit, upload, publish hay deploy nếu chưa có quyền riêng.

Xác minh video và bằng chứng

Kết quả hoàn tất nên gồm:

• CLI source hay binary identity, current help đã kiểm tra, doctor result, engine, template ID, project ID và variable schema.
• Input asset cùng URL, inline text, network request hay blocked request và mọi Studio edit.
• Preview path, visual review note, render command, progress result và MP4 path.
• Bằng chứng ffprobe cho duration, dimension, video cùng audio stream, format và file size.
• Browser, FFmpeg, dependency, port, storage, rights, privacy hoặc publication limitation còn lại.

Stable và beta đóng package cùng wrapper ak:html-video. Release không pin upstream checkout revision hay chứng minh published binary, live template catalog, source build, Chromium installation hoặc cross-runtime render parity.

Xử lý sự cố và hiểu giới hạn