ぶりぶーです。Markdown記法でカンタンにスライドを作成できる、VS Codeの拡張機能の「Marp for VS Code」について、今回はデバイスに保存されている動画の埋め込み方法を書きます！
方法
ローカルの動画をスライドに貼り付ける方法です。
次のコードをMarkdownファイルに挿入してみてください。ただし、動画を用意して、コード中の「movie_path.mp4」をその動画のパスに書き換えてください。
<video src="movie_path.mp4"></video>
srcには、動画のパスと拡張子を含む名前（ファイルからの相対パス）を記述します。
また、パスの区切りは「/」で記述します。
「"」で囲むこともお忘れなく。
例："movie/douga.mov"
しかし、これだけでは動画開始時の静止画像のままで、動画を動かすことができません。ここから、動画の動かし方別に属性を追加していきます。
動画を動かす
続いて、実際に貼り付けた動画を動かすための設定をしていきます！
次に紹介していく要素を組み合わせることも可能です。
[選択必須]は、どれか１つ指定しないと動画を再生できないため、必ず１つは指定してください。
コントロールバーを追加する[選択必須]
再生ボタンや再生速度の変更ボタン、音量ボタンなどが搭載された、コントロールバーを追加することができます。
コントロールバーあるいは自動再生を指定しないと、動画を再生することができません。
<video src="movie_name.mp4" controls></video>
自動再生する[選択必須]
スライドを切り替えた時に自動的に再生されます。
コントロールバーあるいは自動再生を指定しないと、動画を再生することができません。
<video src="movie_name.mp4" autoplay></video>
繰り返し（ループ）再生する
動画の最後まで再生したら、自動的に動画の最初から動画をスタートし、延々と動画を再生する方法です。
<video src="movie_name.mp4" loop></video>
場合によっては、次の「消音にする」も付与しないとうまくいかないかもしれません。
消音にする
音を流したくない場合にミュートを指定します。
<video src="movie_name.mp4" muted></video>
動画のサイズを変更する
幅と高さの調節のことです。動画の容量ではありません。
調整できるのは動画の領域で、動画そのものではないです。領域に合わせて動画自体の縦横の比率を保ったままリサイズされます。
幅と高さのどちらか一方の指定もできます。
<video src="movie_name.mp4" width="640" height="320"></video>
動画再生前の画像を指定する
動画を再生していないときに表示させる静止画を設定できます。
<video src="movie_name.mp4" poster="image_name.png"></video>
組み合わせ
今までの要素を組み合わせれば、カスタマイズの幅が広がります！
指定方法は、属性を半角空白で区切るだけです。
ここでは、よく使う組み合わせを紹介します。
例：コントロールバー＋動画サイズ
<video src="movie_name.mp4" width="640" height="320" controls></video>
例：自動再生＋ループ＋消音＋動画サイズ
<video src="movie_name.mp4" height="320" loop muted autoplay></video>
思った通りにプレビューされない場合
自動再生に関する記述を追記しました。
動画が認識されない
まずはファイルパスが正しくかけているか確認してみてください。
動画を変更しているはずなのにプレビューがうまくいかない場合があるようです。
そんな時は、videoタグをコメントアウト（「Ctrl」+「/」）して、もう一度コメントを解除（同じコマンド）してみてください。再読み込みされて反映されるはずです。
コメントアウトした状態のコード例
<!-- <video src="movie_name.mp4" width="640" height="320" controls></video> -->
自動再生されない
「autoplay」を指定しているのに自動再生がうまくできない場合は、消音にする「muted」属性を付与するとうまくいくことがあるようです。
それでも自動再生されない場合は、自己責任になりますが、「プレビュースライド」の「･･･」アイコンの「その他の操作」をクリックして「プレビューのセキュリティ設定を変更」から、「○○でないコンテンツを許可する」にしてみてください。
出力方法
動画を埋め込んだスライドの場合、適切なフォーマットで出力しないと動画が再生されません。
OK
- HTML
NG
- PowerPoint
- PNG
- JPEG
2023/12現在、HTML出力のみしか対応していません！
HTML出力した場合のプレゼン発表については別記事にまとめる予定です。
どうしてもPowerPointに出力したい場合
何らかの理由でPowerPointを使用しなければならない場合は、現時点で手動しか方法がないようです。
静止画になるものの、動画を貼付しておくことで動画の分のスペースを確保することができます。
- 上記までの方法に則って動画を貼り付ける
ただし、再生方法は関係なく、動画のサイズのみ整えておく - pptファイルに出力する
- PowerPointを開き、動画（現時点で静止画）の上に重ねるようにして動画を貼り付けて保存する
これで動画を貼り付けることができました。
１枚２枚ならまだできますが、多くの動画を用いる場合は大変なので、HTMLの使用をおすすめします。
Marpじゃできないこと
Marpは動画編集用ではないので、できないことだってあります。その例を紹介しておきます。
- 動画の容量を変える
- トリミング
- 字幕や装飾など、動画自体の編集
これらは他のソフトを使って編集してからMarpに持ち込みましょう。
