【初心者向け】HTML5のvideo要素でMP4動画を埋め込む方法｜サイズ調整・自動再生・ループ設定を解説

この記事では、HTMLの<video>要素を使ってMP4動画を手軽に埋め込む方法を解説します。以下の3つのポイントを取り上げます。

1. 動画プレーヤーのサイズ（width / height）を調整する方法
2. 動画を自動再生（autoplay）する方法
3. 動画を無限ループ（loop）させる方法

多くのチュートリアルでは、短い動画の代わりにGIFアニメが使われがちですが、MP4形式ならより高い画質を保ちながらファイルサイズも抑えられます。さらに、MP4はWebMと違ってすべてのモダンブラウザで再生でき、YouTubeなどの動画サービスへのアップロードにも対応しています。

HTML5のvideo要素で動画を埋め込む

HTML内でMP4動画を表示するには、HTML5の<video>要素を使用します。最もシンプルな記述例は以下のとおりです。

<video width="500" controls>
  <source src="path-to-your-video.mp4" type="video/mp4">
</video>

controls属性は省略可能ですが、これがないとユーザーが動画を再生・一時停止・巻き戻しできなくなってしまうため、付けておくことをおすすめします。

500の単位はピクセル（px）です。

"path-to-your-video.mp4"の部分を実際のMP4ファイルのパスに置き換えてください。動作確認用に、以下のサンプル動画URLも利用できます。

https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4

動画プレーヤーのサイズを調整する（width / height）

初期状態では動画の幅は500pxに設定されていますが、任意の数値に自由に変更できます。親コンテナの幅いっぱいに表示したい場合は、width="100%"と指定するだけでOKです。

高さもheight属性で調整できます。両方を指定した例がこちらです。

<video width="100%" height="400" controls>
  <source src="path-to-your-video.mp4" type="video/mp4">
</video>

動画を自動再生する（1回のみ）

ページを開いたときに動画を1回だけ自動再生したい場合は、autoplay属性を追加します。

<video width="500" controls autoplay>
  <source src="path-to-your-video.mp4" type="video/mp4">
</video>

autoplayの仕組みと注意点

autoplay属性を付けると、動画が読み込まれたタイミングで自動的に再生が始まります。ただし、近年のChromeやSafariなどの主要ブラウザは、音声付きの自動再生をブロックするポリシーを採用しているため、確実に自動再生させたい場合はmuted属性（ミュート状態）と組み合わせるのが一般的です。

動画を無限ループ再生する

MP4動画を繰り返し（無限に）再生したい場合は、loop属性を使用します。

<video width="500" controls autoplay loop>
  <source src="path-to-your-video.mp4" type="video/mp4">
</video>

注意： controls属性があればユーザーは手動で停止できますが、ループ再生は閲覧者によっては煩わしく感じられます。特に音声が付いている場合はその傾向が強くなります。背景動画など、ループが目的に合致する場面でのみ使用しましょう。

ブラウザ対応について

古いブラウザを使うユーザーはほぼいなくなりましたが、<video>要素に対応していない環境向けに、タグ内に代替テキストを入れておくことができます。

<video width="500" controls autoplay>
  <source src="path-to-your-video.mp4" type="video/mp4">
  お使いのブラウザは古いため動画を表示できません。最新版へアップデートしてください。
</video>

このテキストは、video要素に対応していない旧ブラウザ（Internet Explorer 9未満など）でのみ表示されます。

WebMをMP4のフォールバック付きで使う

同じ動画のWebM版とMP4版を両方持っている場合は、<source>タグを複数記述することで、WebM非対応のブラウザに対してMP4をフォールバックとして提供できます。

<video width="500" controls>
  <source src="path-to-your-video.webm" type="video/webm">
  <source src="path-to-your-video.mp4" type="video/mp4">
</video>

ブラウザは上から順に、自身が再生できる形式を自動的に選択します。現在、Chrome・Firefox・Edge・Operaなどの主要ブラウザはWebMに対応していますが、Safariなど一部の環境では対応状況が異なるため、MP4をフォールバックとして用意しておくと安心です。

おまけ：MP4録画に便利な無料ツール

MP4動画を手軽に録画したいときは、以下の無料ツールが便利です。

• Kap（Mac向けスクリーン録画アプリ）
• Icecream Screen Recorder（Windows向けスクリーン録画ソフト）

また、録画した動画を無料でアップロード・保管・配信したい場合は、CDN配信に対応したCloudinaryの利用がおすすめです。