動画ファイルをウェブページに埋め込む場合、一昔前はちょっと面倒だった。各デバイス(端末)ごとに扱える動画形式が異なっていたり、そもそもサポートされていなかったりしたから。

2020年9月時点では、基本的には(自動再生ができないとか、そういった面で差異はあるが)どのデバイス(端末)でも動画の再生は可能になっている。用意する動画形式も最低1つで済む。

以下は、動画をウェブページに設置する際の設定サンプル。

設置例

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>

ビデオの幅と高さ

画像の幅と高さを指定するのと同じ。widthheightで指定する。

<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>

動画と静止画の2つを読み込む

動画と静止画の2つを、1行目から読んでもOK。

<video src="video01.mp4" poster="video01.png" controls loop muted>

基本はMP4動画だけで問題ない(はず)。昨年に1回だけ何かの環境で見れなかったことがあったんだけど、何だったかなぁ。。