mp4ファイルなどの動画を<video>タグを使ってPCで自動再生 & 繰り返し再生させる方法！

動画をサイトに埋め込む際のやり方として、HTML5から使用可能となった<video>タグを使う方法があります。

とても簡単なのでぜひ試してみて下さい。

１つ注意しておきたいのは、タイトルに『PCで自動再生 & 繰り返し再生』と『PC』に限定しているように、動画の自動再生は現状パソコンサイトばかりです。
スマホなどの他のデバイスに関しては例外を除いて自動再生はできません。

※PC以外のデバイスで自動再生させたい場合は目次から一番下の『PC以外で動画を自動再生させる場合』に飛んで下さい。

1 HTMLで<video>要素を使用する場合
2 <video>要素の属性
3 PC以外で動画を自動再生させる場合

HTMLで<video>要素を使用する場合

今回はMP4の動画を使用します。
用意したMP4動画をそのままサイトに埋め込みたいだけなら

のみで可能です。

controls属性を指定する事で再生・停止ボタンなどのコントローラーを表示させます。

<sample動画↓>

<video controls>
<source src="sample.mp4">
</video>

サイトによってはこちらの方で紹介している方もいます。
これでも特に問題はないです。

ただ<source>タグを使う理由はブラウザによって表示されない場合に備えて、再生候補を提示するためのものです。

例えば、mp4がだめならogvで表示、ogvでもだめならwebmで表示するといった場合です。

<video controls>
<source src="sample.mp4" type="video/mp4">
<source src="sample.ogv" type="video/ogg">
<source src=“sample.webm" type="video/webm">
</video>

ざっくりですが、こんな感じでコードを書いておけば上から順に表示されていく事になります。

しかし今は主要なブラウザのほとんどが.mp4に対応しているので、video要素に記述するファイルはmp4のみで十分だと思います。

ということでどっちでもわかりやすい方で大丈夫です！

これらの記述だけでもいけますが、sample動画を見ると動画を見るたびに再生をクリックしなければいけないことがわかります。

幅(width)や高さ(height)、自動再生や繰り返し再生を指定したい場合もありますよね。

<video>要素の属性

属性	意味
src	再生したい動画ファイルへのパス(URL)を指定
controls	再生や停止ボタンなどのコントローラー表示
width	動画の横幅を指定
height	動画の縦さを指定
autoplay	ページを開いたときに動画を自動再生
loop	繰り返し（ループ）再生
muted	無音（ミュート）設定
poster	動画がブラウザで表示されない場合、表示させる画像のURL
preload	ページ表示時、動画を読み込むかどうかを設定

設定したい属性を追加するだけです。

例えば、自動再生、無限ループ、幅と高さを300pxに指定する場合。

<sample動画↓>
※PCでは自動再生されますが、スマホなどで見ている方はクリックしないと見れないと思います。

自動再生され、無限ループ、再生ボタンなどのコントローラーがあり、形も300×300の正方形になっているのがなんとなくわかるでしょうか？

autoplay・loop・muted・controlsに関しては省略可能なので「autoplay=”autoplay”」と書かなくてもOKです！

<video controls>
<source src="sample.mp4">
</video>

こちらで記述された方は、

<video controls autoplay loop width=”300” height=“300”>
<source src="sample.mp4">
</video>

これでOKです。