LINEで現役エンジニアに直接質問してみよう!登録無料

HTML videoタグで動画を埋め込む方法!背景として埋め込んでサイトの魅力的にする

この記事のまとめ

HTMLをだけでWebページで動画を埋め込んだり背景として設定する方法を紹介します。

動画の埋め込みはyoutubeなどにアップロードして埋め込みタグを発行してもらってから使うのが一番良く使われています。しかし、HTMLにはJavaScript無しでタグだけで作れる機能がもともと付いています。

基本的な使い方から応用方法に至るまでvideoに関する事を詰め込んで紹介します。

動画を活用できるようになって魅力的なWebページを作れるようになりましょう!

動画の埋め込み方法は2種類あるのを理解しよう

HTML上で動画の埋め込みを行うには2種類の方法があります。

  1. youtubeなどから<iframe>をつかって埋め込む
  2. HTMLの<video>タグを使って動画ファイルを読み込む(この記事で話すこと)

これから話す内容は「2」の<video>タグを使った方法です。

youtubeなどの埋め込みとは全く異なる方法だということを理解しておきましょう!

videoタグで動画を表示する方法

videoタグを使う方法は下記の4ステップを使って表示します

  1. 動画ファイルを用意する
  2. 動画ファイルをサーバーにアップロードする
  3. videoタグを書く
  4. videoタグに動画の表示方法を属性で設定する

順番に解説していきます!

STEP.1
動画ファイルを用意する

動画をHTML上で使うにはまず動画ファイルを用意しなければいけません。

まずは.mp4の形式ファイルを用意します。この形式なら殆どのブラウザが対応しています。

動画の形式変換は、「convertio」というサービスがオススメです。

無料で使えますし、ブラウザで表示できる動画形式への変換に対応しています。また、変換速度も高速です。

サイトを開いたら、「ファイルを選ぶ」を選択して変換したい動画をアップロードします。

ファイルを選んで、変換形式で「MP4」を選びましょう。

「変換」をクリックすると、変換が開始されます。最後は「ダウンロード」ボタンからダウンロードできます。

MEMO

ブラウザで取り扱える動画形式は.mp4 .webmなど数種類しかありません。.mov.aviは対応していないので注意しましょう

STEP.2
動画ファイルをサーバーにアップロードする

convertioで作った動画ファイルをサーバーにアップロードしましょう!

アップロードしたらそのURLをメモしておいてください。

STEP.3
videoタグを書く

<vide>タグを書きましょう!使い方は<img>タグと殆ど同じです。

<video src="video.mp4"></video>

だたし、<img>と違う点もあります。ポイントは下記の2点です。

  1. <video>タグには終了タグがあります
  2. <video>の中身は空にします(中に書く内容は後述します)

まずはこれが基本ですので覚えましょう!

正しくタグが設定できると、このように表示されます。

お気づきのように、このままでは再生は出来ずただ最初のフレームが表示されたままです。

これから属性を色々と付加していき、自動再生するのか、コントローラーをつけるのか、ミュートにするのかなどを細かく設定していきます。

STEP.4
videoタグに動画の表示方法を属性で設定する

動画を再生できるように属性を付与していきます。

一番基本的な使い方として、コントロールパネルを表示するcontrolsを設定してみましょう!

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

controlsを設定すると、「再生ボタン」「再生位置(シーク)」「ボリューム」「全画面表示」などのコントロールパネルを表示出来ます。

なお、controls属性に値は必要ありません。javascriptなどで値をどうしても設定しなくてはいけない時はcontrols="controls"のようにすればOKです。

完成!

videoタグの色々な属性を紹介!

おさらいですが、<video>タグは色々な属性を付与して設定していきます。

先程使ったcontrolsの他にautoplay loop poster playsinline preloadなど色々な設定があります。

やりたいことリスト形式で作りました。

  1. コントロールパネルを表示する(controls)
  2. 無音で再生する(muted)
  3. サムネイル画像を設定(poster)
  4. 動画の高さと幅を設定(width/height)
  5. 自動再生する(autoplay)
  6. 動画終了時に繰り返し再生する(loop)

コントロールパネルを表示する(controls)

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

controls属性を使うと、動画の「再生・一時停止」「ボリューム」「再生位置(シーク)」を調節できるコントロールパネルを表示出来ます。

無音で再生する(muted)

<video muted src="video.mp4"></video>

muted属性を使うと、音無しで再生することが出来ます。再生した時の音の有無を選択できるだけなので、この属性だけだと動画を再生することは出来ません。

サムネイル画像を設定(poster)

<video poster="image.png" src="video.mp4" ></video>

再生前のサムネイル画像を設定することができます。この属性が指定されない場合、最初のフレームがサムネイル画像として表示されます。

動画の高さと幅を設定(width/height)

<video width="200px" height="400px" src="video.mp4" ></video>

動画の高さを幅を設定します。<video>要素の大きさは変化しますが、動画自体のアスペクト比は変化しないので注意しましょう。

また、設定できる値はpx値のみです。%vhなどは対応していません。

MEMO

正直、width heightの使い勝手はあまり良くありません。デザイン面でpx値を使って調節するのはやりにくい部分が多いのです。

<video>に対してCSSを使って設定した方がより柔軟に対応できるので、こちらを利用しましょう。

自動再生する(autoplay)

<video autoplay muted src="video.mp4"></video>

autoplay属性を使うと、スクロール等で画面から見える状態になった時に自動再生するようになります。但し、スマホなどの一部環境ではmuted属性を付与しないと機能しない場合があります。

これは古いAndroidで、Webページを開くと同時に音声付き動画が流れる迷惑な広告が登場し、それを是正するためブラウザ側がこのような仕様に変更した(Chrome 66以降)為です。

より具体的には、Chromeで<video>タグにmuted属性が付いている場合に限り、autoplay属性の追加で自動再生が可能になります。Safariの場合はmuted属性が指定されている場合に加えて、再生するビデオファイルにオーディオトラックが含まれていない場合も、autoplayで再生が可能になります。

MEMO

注意: PCなら自動再生可能ですがスマートフォンの場合は無音設定(muted)にしないと自動再生できません。

自動再生のブラウザ対応状況

  • iPhone Safari iOS9以下:
  • iPhone Safari iOS10以上: (muted付きで可能)
  • Android Chrome 52以下:
  • Android Chrome 53以上: (muted付きで可能)
  • Android 標準ブラウザ:

動画終了時に繰り返し再生する(loop)

<video loop autoplay muted src="video.mp4"></video>

動画が終わった後、繰り返して再生するかどうかを設定します。

注意

loop属性を使用するには、autoplay mutedの2つの属性が必要です。

動画を全画面にならない状態で再生する(playsinline)

<video playsinline autoplay muted src="video.mp4"></video>

スマホをWebページに埋め込んだ時にその動画をクリックすると強制的に全画面表示になって動画が流れる場合があります。

playsinline属性を設定すると、全画面表示させずに動画を再生出来ます。

注意

playsinline属性を使用するには、autoplay mutedの2つの属性が必要です。

MEMO

注意: これもautoplayと同じく無音設定(muted)にしないと使うことは出来ません。

自動再生のブラウザ対応状況

  • iPhone Safari iOS9以下:
  • iPhone Safari iOS10以上: (muted付きで可能)
  • Android Chrome 52以下:
  • Android Chrome 53以上: (muted付きで可能)
  • Android 標準ブラウザ:

動画をいつ読み込むか設定する(preload)

<video preload="none" src="video.mp4" controls></video>

動画ファイルは容量が大きいので、いつ読み込むかを設定することができます。

読み込むタイミングは3種類の中から設定出来ます。

auto
デフォルトの設定です。Webページ読み込みと同時にダウンロードも行います。
none

Webページを読み込んだタイミングではダウンロードしません。controlsなどでユーザーからアクションがあってから読み込みを開始します。

metadata

動画本体はダウンロードしません。長さやファイルサイズなど動画のメタデータ(動画ファイルの情報)のみ読み込みます。

controls属性を使う場合は、その動画をユーザーが見るかどうかわかりません。そのような場合preload="none"を設定すると、読み込み速度が早くなり親切なサイトになります。

ブラウザが動画形式に対応していない!解決策は?

ブラウザによっては対応していない動画形式もあります。そのような時の対処法を紹介します。

結論から言うと、<video>要素の中に<source>要素を作って、そこで様々な形式ファイルを指定すると、再生できるファイルを自動的に使ってくれます。

早速ソースコードを見ていきましょう!

<video>
  <source src="video.webm" type="">
  <source src="video.ogg" type="">
  <source src="video.mp4" type="">
  動画ファイルを再生出来ませんでした
</video>

このように<source>を使います。これで、

  1. 「video.webm」を読み込む。再生出来なかったら次へ
  2. 「video.ogg」を読み込む。再生できなかったら次へ
  3. 「video.mp4」を読み込む。再生できなかったら次へ
  4. 「動画ファイルを再生出来ませんでした」と表示する

このような流れで処理されます。どこかのファイルで再生出来たら処理は終了です。

videoタグが再生されないにはどうすればいい?解決策は?

初心者によくありがちなち、動画が再生されないトラブルとその解決法をまとめます。

PCやAndroidで動画が再生されない!

Webページを公開したくなくて「ベーシック認証」というユーザー認証をする機能があります。これがかかった状態でページを閲覧すると動画を見ることが出来ません。

特にAndroidでこのようなトラブルになることが多いようです。

動画のURLだけはbasic認証をかけないように設定しましょう!

mp4ファイルなのに再生出来ない

意外と落とし穴なのが「mp4ファイル」なのに動画を再生出来ない!というトラブルです。これは「コーディック」と呼ばれる動画と音声のデータ形式が関係しています。

コーディックに関する説明は長くなってしまうのでこの記事では解説しません。「このサイト」が参考になるので見てみてくだいさい。

今は「mp4でも動画ファイルを再生出来ないのはコーディックが原因なんだな」と理解できればOKです。

解決方法としては、「動画をH.264形式(AVC形式)」で動画を新たに書き出して使いましょう!

videoタグを使った実際のWebサイトを紹介

ここでは、<video>を使って作成したWebページの作成例を紹介します。

sansan

言わずとしれたsansanの名刺管理クラウドサービスです。CMもバンバン打ってました。そんなsansanのLPはファーストビュー(ページを開いて一番最初に見える領域)に動画が使われています。

ほぼ画面のすべてを動画で見せることで、インパクトのあるページになっています。

<video>タグにloopmuted属性を指定し、javascriptから自動的に動画が再生されるようになっています。そして動画ファイルの指定には<source>が使われています。

参考 sansan TOPsansan

KARTE

参考 KARTE TOPKARTE

W3G

参考 W3G TOPW3G

株式会社クリーチャーズ creatures.co.jp

参考 株式会社クリーチャーズ TOP株式会社クリーチャーズ

ドットエスティ dot-st

参考 ドットエスティ dot-st TOPドットエスティ dot-st

マイベスト

参考 マイベスト TOPマイベスト
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。