動画ファイルをウェブページに埋め込む場合、一昔前はちょっと面倒だった。各デバイス（端末）ごとに扱える動画形式が異なっていたり、そもそもサポートされていなかったりしたから。
2020年9月時点では、基本的には（自動再生ができないとか、そういった面で差異はあるが）どのデバイス（端末）でも動画の再生は可能になっている。用意する動画形式も最低１つで済む。
以下は、動画をウェブページに設置する際の設定サンプル。
設置例
See the Pen videoタグ by Tora (@webtoranomaki) on CodePen.
ソースコード
HTML
書き方は色々あるんだけど、本記事では超基本的な書き方だけ紹介。
<video poster="video01.png" controls loop muted>
<source src="video01.webm" type="video/webm">
<source src="video01.mp4" type="video/mp4">
<p>動画を再生するには、videoタグをサポートした対応ブラウザが必要です。</p>
</video>コード解説
HTMLの1行目から。ここでは、読み込む静止画ファイルのパスを設定する。ない場合は記述しなくてOK。そのあと、必要に応じて以下の設定が記述可能。
本記事では割愛するが、以下の※のような記述でも良い。
<video poster="video01.png" controls loop muted>ビデオの幅と高さ
画像の幅と高さを指定するのと同じ。widthとheightで指定する。
<video poster="video01.png" width="480px" height="320px">属性の指定
動画の音量や再生などを操作するコントールパネルの表示の有無、自動再生、ループ再生、ミュート再生、などの「属性」を指定できる。
<video poster="video01.png" width="480px" height="320px" controls autoplay loop muted>| controls | コントロールパネルを表示させたい場合は記述 |
| autoplay | 自動再生させたい場合に記述。ただし、Chorome、Safariなどの一部ブラウザでは、ミュート再生の指定「muted」も併記しないといけない。 |
| muted | 音量がゼロ、つまりミュートされた状態で再生させたい場合は記述。 |
| loop | ループ再生させたい場合は記述。 |
| playsinline | スマホ環境で、全画面表示での再生させずに、その場で再生させたい場合は記述。同時に、autoplay, mutedも併記しないといけない。 |
※それ以外の属性や、属性をサポートしているブラウザなどの細かい情報については、MDN web docsを参照。
再生用の動画ファイルの複数読込
動画形式は、基本的にはmp4（H.264タイプのやつ）であれば、PC/モバイルで主要ブラウザ全てが対応している。ただ、ブラウザのバージョンが最新じゃない人もいることを想定すると、他の動画形式も『一応は用意しておく必要があるかもね』ってこと。
ってことで、複数の形式を読み込むために、以下のようにsourceという記述がある。
<video poster="video01.png" controls loop muted>
<source src="video01.webm" type="video/webm">
<source src="video01.mp4" type="video/mp4">
<p>動画を再生するには、videoタグをサポートした対応ブラウザが必要です。</p>
</video>動画形式は、上に書いてある順にチェックされていき、最終的にそれでも動画が再生できない場合は、その下にあるpタグの「videoタグをサポートした～」が表示される。
おまけ
videoタグの1行目は、他にもこんな書き方も出来る。
そのまま動画ファイルを読み込む
posterで読み込む静止画がないなら、1行目からsrcで動画ファイルを読んでもOK。
<video src="video01.mp4" controls loop muted>動画と静止画の２つを読み込む
動画と静止画の２つを、1行目から読んでもOK。
<video src="video01.mp4" poster="video01.png" controls loop muted>基本はMP4動画だけで問題ない（はず）。昨年に1回だけ何かの環境で見れなかったことがあったんだけど、何だったかなぁ。。