html-video - Open DesignチームによるCapCutのオープンソースHTML版。

HTMLビデオとは何ですか？

html-videoは、Open Designチーム（nexu.io）が開発したハイパーフレームフレームワークをベースにした、CapCutのオープンソースHTML版です。このツールを使えば、エージェントはHTMLを記述するだけで、世界レベルの製品プロモーションビデオや教育ビデオなどを生成できます。20種類以上の最高級テンプレートが用意されており、ページ分割編集、複数サイズでのエクスポート、Minimax AIによる音声ナレーションとBGMに対応し、APIキーなしでローカル環境でも実行可能です。

html-videoの主な機能

• テンプレートによる動画生成製品プロモーション、知識説明、データ視覚化などのシナリオに対応する、20種類以上のトップレベルHTMLビデオテンプレートが内蔵されています。エージェントはこれらのテンプレートを直接呼び出して、動的なMP4ファイルを生成できます。
• ページネーションの編集とプレビューStudioエディターは、ページ分割プレビュー、ページ分割編集、およびフレームレベルのテキスト変更をサポートしており、効果を確認するために繰り返しエクスポートする必要がなくなり、編集効率が大幅に向上します。
• マルチサイズ対応ワンクリックで横長16:9、縦長9:16、正方形1:1、小紅書4:5など、主要なビデオフォーマットを切り替えることができ、あらゆるプラットフォームの配信ニーズに対応します。
• エージェントのシームレスな統合6種類のローカルコードエージェントCLI（Codex、Claude Code、Hermes、Cursor Agentなど）を自動的に認識し、上部のバーでワンクリックで切り替えが可能で、設定不要ですぐに使用できます。
• AIによる音声解説とBGMMinimaxと統合されており、動画コンテンツに基づいてナレーションやBGMを自動生成する機能をサポートしています。トークンの消費量が少なく、コストを管理しやすいのも特長です。

HTMLビデオの使い方

• リポジトリのクローン作成GitHubからhtml-videoオープンソースプロジェクトをローカルマシンにダウンロードしてください。
• 依存関係をインストールしますインストールコマンドを実行してローカル環境を設定してください。APIキーの申請は不要です。
• Launch Studioローカルのビジュアルエディタを開き、20種類以上の組み込みテンプレートを閲覧して、自分に合ったスタイルを選択してください。
• 入力内容エージェントは、公開アカウントからウェブサイトのリンク、ファイル、または記事を提供することで、HTMLビデオスクリプトを自動的に生成します。
• ページネーションの絞り込みStudioでは、テキストやビジュアルをページごとにプレビューして編集でき、詳細をリアルタイムで調整できます。
• MP4形式でエクスポート全てが正しいことを確認したら、ワンクリックで高解像度ビデオをエクスポートするか、直接吹き替えとBGMを生成してダウンロードすることができます。

HTMLビデオの主な利点

• ローカル優先、API利用料無料完全にローカルで動作し、クラウドAPIキーに依存せず、データプライバシーを確保し、長期的な利用コストが非常に低い。
• エージェントネイティブ設計Code Agentのワークフロー専用に設計されており、主要なCLIツールをワンクリックで切り替えることができ、AIがコンテンツ作成からビデオ制作までの全プロセスを自動的に完了させることができます。
• HTML駆動、極めて低コスト従来のビデオエンジニアリングに代わり、HTML/CSSを使用することで、わずか3万行のコードでCapCutレベルの体験を実現でき、技術的なハードルやメンテナンスコストはプロ仕様のビデオソフトウェアよりもはるかに低くなります。
• リアルタイム反復処理。見たままの結果が得られます。ページ分割編集モードは、フレームごとの変更とリアルタイムプレビューをサポートしており、従来のビデオツールにおける「変更→レンダリング→確認」という非効率的なサイクルを回避します。

html-video のプロジェクトアドレス

• GitHubリポジトリ：https://github.com/nexu-io/html-video

類似製品とHTMLビデオの比較

寸法	html-video	FireRed-OpenStoryline
コアポジショニング	CapCutのHTML版、エージェントネイティブビデオ生成	監督的思考を備えた対話型AIビデオ編集エージェント
技術アーキテクチャ	ハイパーフレーム + HTML/CSSレンダリングエンジン	MoviePy + FFmpeg + LangChain + MCPプロトコル
相互作用方法	Studioビジュアルエディタ + Agent CLIコード駆動型	自然言語による対話とWebインターフェースを介したリアルタイムのやり取り
材料の供給源	ユーザー入力（リンク、ファイル、記事）＋20種類以上の組み込みテンプレート	自動オンライン検索（Pexels）＋ユーザーアップロード素材
編集の粒度	ページネーションのプレビューとフレームレベルのテキスト編集	ダイアログベースのレタッチ（トリミング、置換、再配置、色補正）
AI機能	テンプレートベースの生成、Minimaxのナレーション、BGM	インテリジェントなスクリプト生成、ASRのラフカット、AIによるトランジション、スタイル模倣
エージェント統合	6種類のCLI（Codex、Claude Code、Cursorなど）をネイティブでサポートしています。	OpenClaw / Claude Code / Codex スキル統合
ローカル/クラウド	ローカルファーストのアプローチを採用しており、コア機能にはAPIキーは一切不要です。	ローカル環境（Docker/Conda）での展開には、LLM APIキーの設定が必要です。
ハードウェア要件	通常のノートパソコンで動作します	コアロジックはGPUなしでも動作可能で、CPUだけで十分です。
テンプレート／スキル	20種類以上の組み込みHTMLビデオテンプレート	編集スキルの向上（リズム、色調、トランジションスタイルの再利用）
出力形式	MP4形式、複数のアスペクト比（16:9 / 9:16 / 1:1 / 4:5）に対応	カスタム解像度ビデオ
オープンソースライセンス	Apache 2.0	Apache 2.0
対象者	開発者、エージェントのワークフロー、製品プロモーション/知識説明	コンテンツクリエイター、Vlogブロガー、ナレーション付き動画のプロデューサー

HTMLビデオの応用シナリオ

• 知識ブロガーコンテンツの大量生産WeChat公式アカウントの記事や技術文書を、音声解説付きの知識解説動画に自動的に変換し、小紅書（4:5）やBilibili（16:9）など、複数のプラットフォーム仕様に対応します。
• 製品プロモーションビデオ製品の公式サイトのリンクを入力すると、エージェントが自動的にセールスポイントを抽出し、動的な製品デモビデオを生成するため、スタートアップ企業がマーケティング資料を迅速に作成するのに適しています。
• データ可視化レポートCSV/JSONデータを動的なチャート動画に変換し、プレゼンテーションやソーシャルメディアでの共有に活用することで、静的なチャートの退屈さを解消します。
• Eコマースコンテンツ制作製品紹介や使用方法チュートリアルなどの短い動画を一括生成し、Minimax AIの音声ナレーションを活用することで、低コストかつ高効率なコンテンツマトリックス運用を実現します。