video-sync — Ghép video kèm thông tin phân cảnh

Ghép dữ liệu phân tích shots.json với video gốc thành một video xem được ngay, trong đó thông tin của cảnh đang chiếu tự đổi theo từng cú cắt.

Ảnh · VideoTrung cấp★ 306⑂ 36Điểm AI 8/10Cập nhật lần cuối: 12 thg 9, 2026

Làm được gì

Ghép shots.json (sản phẩm của skill video-shots: số cảnh, thời điểm vào/ra, thời lượng, cỡ cảnh, loại, chuyển động camera, mô tả hình, thoại) với video gốc thành một video duy nhất.
Tự chọn bố cục chỉ dựa vào tỉ lệ khung: ngang/vuông → hình trên, thông tin dưới (vstack); dọc → hình bên trái, thông tin bên phải (hstack). Hình luôn scale nguyên bản, không crop, không kéo méo.
Bảng danh sách cảnh tự cuộn theo tiến trình phát và highlight dòng đang chiếu; cảnh hiện tại ghim ở dòng thứ hai, chỉ cuộn trong --ease (mặc định 0.45s) tại điểm cắt rồi dừng.
Chỉ chụp 3 ảnh (nền + bảng dài tối + bảng dài sáng); hiệu ứng cuộn/highlight do ffmpeg cắt khung theo thời gian → phim 53 cảnh chỉ mất ~12 giây render panel.
Toàn bộ bố cục nằm trong scripts/panel.css, sửa CSS là đổi được layout. Không phụ thuộc npm, chỉ dùng thư viện chuẩn của Node.

Phù hợp với ai

Người làm nội dung video, dựng phim, đạo diễn cần review phim tham khảo theo từng cảnh
Giảng viên làm tài liệu dạy quay dựng hoặc video "bản có bình luận"
Nhóm đã dùng skill video-shots để tạo dữ liệu phân cảnh

Ví dụ sử dụng

Kiểm tra hình học trước: node scripts/video-sync.mjs plan shots.json --video ref.mp4 để xem bố cục, vùng hình, vùng panel và kích thước xuất chỉ trong vài giây.
Render panel và xem trước trên trình duyệt: chạy panels shots.json --video ref.mp4 --frames frames --lang en, rồi mở panels/panel.html, đổi #S07 để xem từng cảnh.
Xuất một lần rồi nghiệm thu: export shots.json --video ref.mp4 -o out.mp4 --frames frames, sau đó trích frame ở giây 5/30/60 để đối chiếu số cảnh trên panel với hình thực tế.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/eternityspring/reelbench-skills/HEAD/skills/video-sync/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)

Tải tệp ZIP bằng nút bên dưới.
Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.

↓ Tải ZIP

Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/video-sync từ repo GitHub eternityspring/reelbench-skills vào ~/.claude/skills/video-sync/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/eternityspring/reelbench-skills.git /tmp/reelbench-skills && mkdir -p ~/.claude/skills && cp -r /tmp/reelbench-skills/skills/video-sync ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

Cài các công cụ bắt buộc: Node.js >= 18, ffmpeg, ffprobe và một trong Chrome/Chromium/Edge (panel được render bằng HTML).
Tải repo: git clone https://github.com/eternityspring/reelbench-skills.git
Copy skill vào thư mục skill của Claude Code: mkdir -p ~/.claude/skills && cp -r reelbench-skills/skills/video-sync ~/.claude/skills/
Copy luôn skill video-shots theo cách tương tự để có nguồn tạo shots.json.
Kiểm tra: node ~/.claude/skills/video-sync/scripts/selftest.mjs (106 assertion, không cần ffmpeg hay trình duyệt).
Khởi động lại Claude Code và thử yêu cầu: "xuất video kèm thông tin phân cảnh cho file này".
Muốn đổi bố cục, sửa ~/.claude/skills/video-sync/scripts/panel.css rồi chạy lại bước panels.

Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0