HTMLのvideoタグで動画を埋め込む方法

HTMLのvideoタグで動画を埋め込む方法

 公開日:

LINEで送る
Pocket

HTMLのvideoタグで動画を埋め込む方法

この記事の目次

  1. videoタグとは?
  2. videoタグの使い方
  3. videoタグの主な属性
    3-1.controls属性
    3-2.autoplay属性
    3-3.loop属性
    3-4.poster属性
  4. ブラウザ対応状況
  5. WordPressでvideoタグを使用する
    5-1.WordPressのvideoショートコードのオプション一覧
  6. 理解するポイント

1.videoタグとは?

HTMLのvideoタグは、HTML文書内で「動画」を再生するための要素で、HTML5から新たに追加された要素です。

2.videoタグの使い方

videoタグを使用するには、<video></video>の中に動画ファイル名やその他の属性を記述します。更に、videoタグに対応していないブラウザで表示するメッセージを記述することもできます。

使用例:HTML

<video src="sample_movie.wmv"></video>

最もシンプルな記述です。videoタグのsrc属性としてファイルを指定する方法です。
しかし、これだとwmvに対応していないブラウザでは表示されません。このような場合は、「sourceタグ」を使用します。

使用例:HTML

<video>
  <source src="sample_movie.wmv"></source>
  <source src="sample_movie.mp4"></source>
</video>

上記の場合、まずは「sample_movie.wmv」が再生されます。もし、wmvファイルに対応していないブラウザの場合は、MP4ファイルが読み込まれます。
このように、対応していないブラウザの場合の代替ファイルを指定することができます。

また、対応していないブラウザ環境の場合に表示するメッセージを記述することもできます。

<video src="sample_movie.mp4">
  <p>動画の再生に対応したブラウザをインストールしてください。</p>
</video>

3.videoタグの主な属性

videoタグに属性を設定することで、より詳細に設定することができます。

3-1.controls属性

controls属性は、再生や一時停止、ボリューム、再生位置などを設定するためのコントローラーを表示してくれます。表示形式は各ブラウザ標準のコントローラーが表示されます。

使用例:HTML

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

使用例:ブラウザ

3-2.autoplay属性

autoplay属性は、ページを読み込んだ際に動画を「自動再生」してくれる機能です。

※動画などで、音声が自動で流れるコンテンツは、ユーザーにとって不快にさせてしまう恐れがありますので、できるだけ自動再生は避けるべきです。それでも音声を流す際にはユーザーに分かりやすく明記する必要があります。

使用例:HTML

<video autoplay>
  <source src="sample_movie.mp4"></source>
</video>

使用例:ブラウザ

3-3.loop属性

loop属性は、動画を繰り返し再生します。

使用例:HTML

<video loop>
  <source src="sample_movie.mp4"></source>
</video>

使用例:ブラウザ

3-4.poster属性

poster属性は、ユーザーのブラウザ環境に動画が対応していない場合や動画の読み込み中に、代替画像を表示することができます。

使用例:HTML

<video poster="sample.jpg">
  <source src="sample_movie.mp4"></source>
</video>

4.ブラウザ対応状況

videoタグのブラウザ対応状況は下記を参考にしてみてください。
また、迷ってしまった場合は、「mp4」を使用するとほとんどのブラウザで対応していると考えてよいと思います。
HTML の audio 及び video で対応しているメディア形式 | MDN

5.WordPressでvideoタグを使用する

当然ですが、WordPressでvideoタグを使用することはできます。但し、テキストエディタに記述する場合はそのままタグを使用すればよいのですが、「メディアの追加」から挿入する場合は、以下の様な「ショートコード」が挿入されます。

[video width="320" height="180" mp4="sample_movie.mp4"][/video]

※WordPressの仕様上「[ ]」を全角で記述しています。実際は半角で記述されます。

標準で挿入されるのは、width属性とheight属性、それと「mp4=””」の部分に動画ファイルのソースが記述されます。(※「src=””」でも可。)

5-1.WordPressのvideoショートコードのオプション一覧

ショートコードに使用できるオプションは以下の通りです。

src 動画ファイルのソース。複数のファイルタイプを指定する場合は下記のようにタイプ毎に指定。
‘mp4′,’m4v’,’webm’,’ogv’,’wmv’,’flv’
poster 代替画像を指定
loop “off” (デフォルト)
“on” (ループ再生)
autoplay “off” (デフォルト)
“on” (再生準備ができ次第再生)
preload “metadata” (デフォルト:ページ読み込み時にメタデータだけを読み込む)
“none” (ページ読み込み時に動画を読み込まない)
“auto” (ページ読み込み時に動画全体を読み込む)
width メディアの幅を指定(初期値でメディアの幅が自動検出)
height メディアの高さを指定(初期値でメディアの高さが自動検出)

理解するポイントまとめ

  • videoタグは、HTML文書内で「動画」を再生するための要素です。
  • ファイルタイプによっては、ブラウザが対応していない場合があるので注意する必要があります。
  • WordPressのvideoショートコードを使用する場合はオプションの指定方法が違います。
LINEで送る
Pocket