vMix Credit Roll Builder Pro

🎥

Hướng dẫn sử dụng

vMix Credit Roll Builder · VietKA.TV · Phần mềm tạo bảng chạy chữ chuyên nghiệp

Phần mềm này làm gì?

vMix Credit Roll Builder là công cụ tạo bảng chạy chữ (Credit Roll) phật sóng chuyên nghiệp.
Bạn nhập danh sách nhân viên, nhà tài trợ, cấu hình font/màu/tốc độ — rồi xuất ra:

⬇ File HTML (chạy trực tiếp trong vMix / OBS) 🎬 Video WebM Alpha (trong suốt — overlay không cần greenscreen)

Quy trình làm việc

Nhập dữ liệu: Điền thông tin Crew & Staff, thêm nhóm tài trợ, nội dung khác. Hoặc paste từ Excel.

Cài đặt hiệu ứng: Chọn font, màu chữ, tốc độ cuộn, bố cục (giữa / hai cột / trái / phải).

Xem trước: Nhấn nút 👁 Xem trước để kiểm tra toàn màn hình.

Xuất file: Nhấn ⬇ EXPORT FILE để lấy file HTML, hoặc 🎬 VIDEO ALPHA để xuất video WebM trong suốt.

Đưa vào sản xuất: Load file HTML hoặc video vào vMix / OBS và phát sóng!

Dữ liệu tự động lưu

Mọi thay đổi được tự động lưu vào IndexedDB của trình duyệt. Khi mở lại trang, tất cả dữ liệu cũ sẽ được khôi phục tự động. Không cần lưu thủ công.

🗂 Project & Layout

Tên dự án, chế độ (Master / Copy), bố cục chữ (giữa / hai cột / trái / phải), hướng cuộn (dọc / ngang).

⚙️ General Settings

Thời lượng cuộn (giây — credit roll chạy hết trong bao lâu), line height, chế độ kết thúc (Scroll Out / Loop / Cinema Fade), auto-fit chữ dài, độ phân giải, vùng an toàn.

⚡ Performance & Render

Tần số quét, render mode (GPU / Balanced / Safe), motion blur, chất lượng ảnh, gamma, khoảng cách giữa các dòng.

🔤 Font Settings

Chọn font (Web Safe hoặc Google Fonts), style (Regular/Bold/Italic), cỡ chữ cơ sở. Xem trước font ngay trong preview bên dưới.

🎨 Color & Size

Riêng biệt cho từng loại: Job (chức vụ), Name (tên), Sponsor (nhà tài trợ), Other (mục khác), Logo. Màu nền preview và loại nền xuất (trong suốt / solid).

📥 Import Data

Upload file .csv hoặc paste thẳng từ Excel (cột: Chức vụ [Tab] Tên). Dữ liệu được thêm vào danh sách Crew tự động.

👥 Crew & Staff

Danh sách nhân sự: mỗi dòng gồm Chức vụ và Tên. Nếu chỉ có Tên (bỏ trống Chức vụ) sẽ hiển thị nư dòng tiêu đề riêng.

⭐ Sponsorship Tiers

Nhóm tài trợ: mỗi nhóm có tiêu đề và logo. Nhấn + Logo để upload nhiều logo cùng một nhóm (hiển thị hàng ngang).

📝 Other Items

Các mục bổ sung: bản quyền, lời cảm ơn, thông tin liên hệ. Hiển thị sau các mục Crew và Sponsor.

Mẹo nhập dữ liệu từ Excel

Trong Excel, cột A = Chức vụ, cột B = Tên.

Bôi đen các ô cần dán, nhấn Ctrl+C.

Dán vào ô "Paste từ Excel" rồi nhấn nút ↑ Import Pasted Data.

Phím tắt trong cử số Xem Trước (Live Preview)

Khi bấm 👁 Xem trước, cử số hiện ra toàn màn hình. Trong đó, các phím sau hoạt động:

Phím	Chức năng
`Space`	Phát / Tạm dừng animation
`R`	Khởi động lại từ đầu
`↑` Arrow Up	Tăng thêm 5 giây (làm chậm cuộn)
`↓` Arrow Down	Giảm bớt 5 giây (làm nhanh cuộn)
`S`	Bật / Tắt viền an toàn (Safety Area 90% → 80% → Off)
`Esc`	Dừng khẩn cấp (Emergency Stop) — ẩn toàn bộ nội dung
`Esc` (lần 2)	Khôi phục và tiếp tục phát

Phím tắt trong File HTML xuất ra

File HTML xuất ra hoạt động giống hệt cDSS số xem trước. Có thể điều khiển trực tiếp bằng các phím trên khi mở file ở trình duyệt hoặc trong vMix Browser Source.

Phím	Tác dụng
`Space`	Phát / Tạm dừng
`R`	Restart từ đầu
`↑` / `↓`	Điều chỉnh thời lượng ±5 giây (realtime)
`S`	Safety Area overlay
`Esc`	Emergency Stop / Khôi phục

URL Parameters — Điều khiển từ xa

Thêm tham số vào URL của file HTML để tự động hóa:

Tham số	Ý nghĩa	Ví dụ
`?autoplay=true`	Tự phát khi mở	`file.html?autoplay=true`
`?speed=200`	Ghi đè tốc độ (px/s)	`file.html?speed=150`
`?loop=true`	Bật chế độ loop	`file.html?loop=true`
`?safe=90`	Hiển thị safety area 90%	`file.html?safe=80`
`?dir=vertical`	Hướng cuộn	`?dir=horizontal-r2l`

Xuất file HTML

Nhập đủ dữ liệu, chọn độ phân giải (HD/Full HD/4K), cài font và màu.

Mục Loại Nền Xuất chọn Trong suốt (vMix/OBS) để nền trong suốt khi chạy trong phần mềm.

Nhấn ⬇ EXPORT FILE — file .html sẽ được tải xuống.

File HTML tự động chạy animation khi được load. Không cần server, mở thẳng trong trình duyệt.

Dùng trong vMix

vMix → Add Input → chọn Web Browser.

Nhập đưỜng dẫn file: file:///C:/path/to/YourFile.html

Bật Enable JavaScript và Transparent Background.

Thêm lên Timeline, chạy cùng với nguồn video chính.

Dùng trong OBS Studio

Sources → + → Browser.

URL: file:///C:/path/to/YourFile.html · Width/Height = độ phân giải bạn chọn.

Tích Shutdown source when not visible để reset khi bắt đầu mới.

Cài đặt Render Mode nào tốt nhất?

⚡ GPU Accelerated (khuyến nghị)

Dùng Web Animations API chạy trên GPU. Mượt nhất, ít CPU nhất. Yêu cầu Chrome / Edge mới.

🔵 Balanced

Dùng CSS Keyframes. Tương thích rộng hơn, hiệu năng tốt trên máy trung bình.

🟡 Compatibility Safe

Dùng requestAnimationFrame thuần JS. Dùng cho máy cũ hoặc vMix trên máy yếu.

Video Alpha là gì?

Là file video WebM / VP9 có kênh alpha (trong suốt). Bạn có thể đặt nó lên mọi nội dung khác trong vMix / OBS / Premiere mà không cần greenscreen.

✅ Codec: VP9 Alpha ✅ Container: WebM ⚠️ Yêu cầu Chrome / Edge

Hướng dẫn xuất

Nhập xong dữ liệu, nhấn 🎬 VIDEO ALPHA (nút xanh lá bên cạnh EXPORT FILE).

Chọn Giới hạn độ phân giải: Full HD (1920×1080) đủ dùng trong hầu hết dự án.

Chọn FPS: 30fps cho chuẩn, 25fps cho PAL/châu Âu.

Bitrate: 20 Mbps đủ chất lượng cao. 50-100 Mbps cho xuất bản master.

Nhấn 🎬 Bắt đầu xuất video và không đổi tab trong khi đang ghi.

Khi xong, file TênDựÁn_alpha.webm sẽ được tải tự động.

Kỹ thuật render frame-accurate

Công cụ dùng virtual clock (frameIndex × frameDuration) thay vì đồng hồ thực. Mỗi frame được vẽ chính xác tại thời điểm ảo tương ứng — không bị jitter dù máy chậm hay tab bị che.

1s Intro trong suốt Animation chạy 1s Outro trong suốt

🎬 vMix — Dùng File HTML

Add Input → Web Browser → nhập đường dẫn file → bật Transparent BG + JavaScript → đưa vào layer trên cùng.

🎬 vMix — Dùng Video Alpha

Add Input → Video/DVD → chọn file .webm → trong Settings bật Alpha Channel hoặc dùng Chroma Key mode Alpha.

📹 OBS — Dùng File HTML

Sources → Browser → Local File → chọn file HTML → Width/Height khớp với Output Resolution.

📹 OBS — Dùng Video Alpha

Sources → Media Source → chọn file .webm. OBS tự động nhận kênh alpha của VP9 WebM.

🎥 Premiere Pro / After Effects

Import file .webm vào Project → kéo vào Timeline. AE / Pr nhận alpha VP9. Xuất ProRes 4444 cho đầu ra master.

ℹ️ Lưu ý quan trọng

Độ phân giải file HTML/Video phải khớp với Output Resolution của vMix/OBS. Nếu dùng 4K source, chọn 4K trong tool.

So sánh: HTML vs Video Alpha

Tiêu chí	⬇ File HTML	🎬 Video Alpha
Chất lượng chữ	Vector — sắc nét mọi độ phân giải	Raster — phụ thuộc FPS và bitrate
Hiệu năng	Dùng CPU/GPU lúc phát	Chỉ decode video — rất nhẹ
Logo / Ảnh	Hỗ trợ mọi định dạng	Phụ thuộc chất lượng lúc render
Tương tác trực tiếp	Phím tắt, URL params	Không điều chỉnh sau khi xuất
Khả năng tương thích	Cần Browser Source	Dùng được mọi phần mềm dựng
Khuyến nghị dùng khi	Dự án sống (live) cần điều chỉnh	Cần lưu trữ vĩnh viễn / chia sẻ