動画ファイルをウェブページに埋め込む場合、一昔前はちょっと面倒だった。各デバイス(端末)ごとに扱える動画形式が異なっていたり、そもそもサポートされていなかったりしたから。
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>
ビデオの幅と高さ
画像の幅と高さを指定するのと同じ。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>
動画と静止画の2つを読み込む
動画と静止画の2つを、1行目から読んでもOK。
<video src="video01.mp4" poster="video01.png" controls loop muted>
基本はMP4動画だけで問題ない(はず)。昨年に1回だけ何かの環境で見れなかったことがあったんだけど、何だったかなぁ。。