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

2020年8月4日

この記事の目次

videoタグとは？

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

videoタグを使用するには、<video></video>の中に動画ファイル名やその他の属性を記述します。

更に、videoタグに対応していないブラウザで表示するメッセージを記述することもできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

videoタグのブラウザ対応状況は下記を参考にしてみてください。

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

当然ですが、WordPressでvideoタグを使用することはできます。

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

［video width="320" height="180" mp4="sample_movie.mp4"］［/video］

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

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

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

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