explain-with-video

動画で説明

大きな動画風プレーヤーで再生する、約60秒の短く簡潔なアニメーション解説です。デフォルトでは動画ファイルではなく、ライブHTML/SVGアニメーションです。テーマに沿って表示され、テキストを検索・コピーでき、編集時に再レンダリングは不要です。

このスキルを使う場面

• ユーザーが、変更内容を動画で視覚的に説明するよう求めた場合。
• オーケストレーターが、変更内容を動画で視覚的に説明するために使う場合。

動画

• 約60秒で、テンポよく進みます。4～7章で構成し、各章では1つの要点を1つの動くビジュアルで伝えます。
• 大きなステージを使用します。デスクトップではコンテンツ幅いっぱいの16:9にし、スマートフォンでは縦長のレイアウトに切り替えて、文字を大きくします。
• ステージの下の帯に、キャプションを実際のテキストとして表示します。
• ステージはすっきり保ちます。動画内やスクラバー上に、章のラベル、タイムスタンプ、ツールチップを表示しません。
• プレーヤーの操作機能：再生／一時停止（Space）、スクラバー、再生速度、キャプションの切り替え、全画面表示。
• 再生前に、空のステージではなく、意味のあるポスターフレーム（最も印象的なフレーム）を表示します。一時停止すると、常に見やすくすっきりしたフレームが表示されます。

プレーヤーの下

• プレーヤーのすぐ下に章の名前を横一列に表示します。クリックするとその章に移動し、再生中の章をハイライトします。
• 続いて、コンパクトな詳細エリアを設けます。内容が分かる名前を付けたev-moreトグルをいくつか配置し、ビジュアルコンテンツ（ハイライト表示したコード、チップ、コンパクトな表）を含めます。小さくまとめます。

作成方法

• explainer-kitスキル（テーマトークン、ev-more、コードブロック）を使って作成します。
• すべてのフレームを、時間だけをもとに全体の画面を設定する1つの関数render(t)で描画し、requestAnimationFrameで動かします。これにより、シーク、再生速度の変更、ポスターフレームを簡単に実現できます。
• ユーザーがページ外で共有するファイルを必要とする場合に限り、実際の動画ファイルをレンダリングします（例：Python PILでフレームを作成し、ffmpegにパイプで渡します）。