WEB / HTML / VIDEO

LESSON 01

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

Webページでは、HTMLのvideoタグを使って動画を表示できます。

今回は、MP4形式の動画をWebページに配置し、自動で繰り返し再生する方法を解説します。CSSはまだ使用しません。まずは、HTMLで動画を扱うための基本を確認しましょう。

この記事で学べること

この記事では、次の内容を学びます。

videoタグを使って動画を表示する
sourceタグで動画ファイルを指定する
動画を自動で再生する
動画を繰り返し再生する
スマートフォン上で動画を再生するための属性を設定する

今回の完成イメージ

今回は、Webページ内に動画を横幅960ピクセルで表示します。

動画はページを開くと自動的に再生され、最後まで再生すると先頭へ戻って繰り返し再生されます。

この段階では、動画をHeroエリアの背景にはしません。Hero全体に表示する方法は、次回の記事で解説します。

見出しの下に花の動画を表示したWebページの完成イメージ — 完成イメージ：見出しの下に動画を配置し、自動で繰り返し再生するWebページ

使用するファイル

今回は、次の2つのファイルを使用します。

sample/
├─ index.html
└─ video/
   └─ hero.mp4

index.htmlは、Webページの内容を記述するHTMLファイルです。

hero.mp4は、Webページに表示する約5秒の動画です。動画ファイルはvideoフォルダーの中へ保存します。

STEP 1

HTMLファイルを作成する

Visual Studio Codeなどのコードエディターを起動し、次のHTMLを入力します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>videoタグで動画を表示する</title>
</head>
<body>
  <h1>videoタグで動画を表示する</h1>
</body>
</html>

入力したら、ファイル名をindex.htmlとして保存します。

HTMLの基本構造

<!DOCTYPE html>は、このファイルがHTML5で記述されていることをブラウザーへ伝えるための宣言です。

htmlタグの中は、主にheadタグとbodyタグの2つに分かれています。

headタグ：ページの設定やタイトルなどを記述する
bodyタグ：ブラウザーの画面に表示する内容を記述する

今回は、bodyタグの中へ動画を追加します。

STEP 2

videoタグを追加する

h1タグの下へ、次のコードを追加します。

<video width="960">
</video>

追加後のbodyタグ内は、次のようになります。

<body>
  <h1>videoタグで動画を表示する</h1>

  <video width="960">
  </video>
</body>

videoタグは、Webページに動画を配置するためのタグです。

開始タグの<video>と終了タグの</video>を使い、その間に再生する動画の情報を記述します。

width属性で表示幅を指定する

width="960"は、動画を横幅960ピクセルで表示する指定です。

<video width="960">

ここで指定しているのは、動画ファイル自体の解像度ではなく、Webページ上での表示幅です。

例えば、widthの値を640へ変更すると、動画は横幅640ピクセルで表示されます。

<video width="640">

今回はCSSを使用しないため、HTMLのwidth属性で表示幅を指定します。画面幅に応じて動画サイズを変える方法は、別の段階で扱います。

STEP 3

表示する動画ファイルを指定する

videoタグの中へ、sourceタグを追加します。

<video width="960">
  <source src="video/hero.mp4" type="video/mp4">
</video>

sourceタグは、再生する動画ファイルと、そのファイル形式を指定するためのタグです。

src属性

src属性には、表示する動画ファイルの場所を指定します。

src="video/hero.mp4"

この指定は、index.htmlと同じ場所にあるvideoフォルダーの中から、hero.mp4を読み込むという意味です。

フォルダー名やファイル名が実際の構成と異なっていると、動画は表示されません。

type属性

type属性には、動画ファイルの種類を指定します。

type="video/mp4"

video/mp4は、指定したファイルがMP4形式の動画であることをブラウザーへ伝えます。ブラウザーはこの情報を利用して、その動画を再生できるか判断します。

STEP 4

動画を自動で繰り返し再生する

videoタグへ、次の4つの属性を追加します。

<video width="960" autoplay muted loop playsinline>
  <source src="video/hero.mp4" type="video/mp4">
</video>

追加した属性には、それぞれ異なる役割があります。

autoplay属性

autoplay

autoplayは、Webページが表示されたときに動画を自動再生するための属性です。

ただし、多くのブラウザーでは、音声を含む動画の自動再生が制限されています。そのため、背景動画では通常、次のmuted属性も一緒に指定します。

muted属性

muted

mutedは、動画を消音状態で再生するための属性です。

今回使用するMP4には音声トラックが含まれていませんが、背景動画に必要な基本設定として指定しておきます。

autoplayとmutedは、次のように組み合わせて使用するのが一般的です。

<video autoplay muted>

loop属性

loop

loopは、動画の再生が終了したら先頭へ戻り、繰り返し再生するための属性です。短い動画を背景として継続的に表示する場合に使用します。

playsinline属性

playsinline

playsinlineは、スマートフォンなどで動画をページ内に表示したまま再生するための属性です。

この指定がないと、端末やブラウザーによっては、動画が全画面表示で再生されることがあります。背景動画として使用する場合は、playsinlineも指定しておきます。

STEP 5

代替テキストを追加する

sourceタグの下へ、次の文章を追加します。

<video width="960" autoplay muted loop playsinline>
  <source src="video/hero.mp4" type="video/mp4">
  お使いのブラウザーは動画の再生に対応していません。
</video>

この文章は、videoタグに対応していない環境へ向けた代替テキストです。

現在の主要なブラウザーはvideoタグに対応していますが、HTMLの基本的な書き方として追加しておきます。

完成したHTML

ここまでに作成したHTMLの完成コードは、次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>videoタグで動画を表示する</title>
</head>
<body>
  <h1>videoタグで動画を表示する</h1>

  <video width="960" autoplay muted loop playsinline>
    <source src="video/hero.mp4" type="video/mp4">
    お使いのブラウザーは動画の再生に対応していません。
  </video>
</body>
</html>

index.htmlをブラウザーで開き、見出しの下に動画が表示されることを確認してください。

第1回の完成結果を確認する

動画が表示されない場合

動画が表示されない場合は、次の点を確認してください。

ファイルの保存場所を確認する

index.htmlとvideoフォルダーの位置が、次の構成になっているか確認します。

sample/
├─ index.html
└─ video/
   └─ hero.mp4

ファイル名を確認する

次のような違いがあると、動画を読み込めません。

hero.mp4とHero.mp4
videoとvideos
半角文字と全角文字
ファイル名末尾の不要な空白

サーバー環境によっては、大文字と小文字も区別されます。

src属性を確認する

動画ファイルの場所と、src属性の指定が一致しているか確認します。

<source src="video/hero.mp4" type="video/mp4">

videoフォルダーの中にhero.mp4が保存されていれば、この指定で読み込めます。

自動再生されない場合

ブラウザーの設定や省電力機能などにより、自動再生が制限される場合があります。

まず、autoplayとmutedが両方指定されているか確認してください。

<video autoplay muted>

今回のまとめ

今回は、HTMLのvideoタグを使ってMP4動画を表示しました。

videoタグで動画を配置する
sourceタグで動画ファイルを指定する
autoplayで自動再生する
mutedで消音する
loopで繰り返し再生する
playsinlineでページ内再生を指定する

この段階では、動画は通常のコンテンツとして表示されています。

次回はCSSを使い、この動画を画面全体に広がるHero背景動画へ変更します。

第2回：動画をHero全体の背景として表示する