スポンサーリンク

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

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

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

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

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

スポンサーリンク

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

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

<video src=”sample.mp4″ controls></video>

のみで可能です。

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に指定する場合。

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

<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です。

PC以外で動画を自動再生させる場合

スマホで自動再生や繰り返し再生を行いたい場合は昔ながらのGIFアニメが現状ではオススメです。

やはり動画をそのままアップロードさせる方が画像は綺麗ですが…。

例えば、私のこちらの記事、開いてもらうとわかるのですが、PhotoshopのDEMO動画が自動で無限ループで再生されます。

これはmp4ファイルをGIFアニメに変換しています。

多少画像の荒さはあるもののmp4ファイルよりも断然GIFの方が軽いので表示される時間が勝負のスマホには向いてると思います。

GIFアニメに変換したい方は違う記事で紹介しているので参考にして下さい^^

それぞれメリット・デメリットがあるので使用用途やデバイスに合わせて選んでいただければと思います。

WordPressにmp4ファイルなどの動画を埋め込み、PCで自動再生 & 繰り返し再生させる方法!はこちらの方で。