HTML videoタグで動画を 埋め込み表示する方法

本記事は広告が含まれる場合があります HTML

【HTML videoタグの使い方】動画の埋め込み・表示方法

今回はWebサイトに動画を埋め込む際に使用されるHTMLタグ「videoタグ」の使い方について詳しく解説していきます。

数秒〜2,30秒程度の小さい動画であれば、YouTubeにアップしてからサイトに埋め込み表示などしなくても、videoタグを利用して簡単にmp4などの動画をサイト表示させることができます。

 

 

 

videoタグの基本的な使い方

videoタグを使って動画ファイルを読み込むには以下のようにsrc属性を指定して、その中に動画ファイルまでのパスを指定してあげればOKです。

例では、コントロールボタンを表示するためにvideoタグの中にcontrolsを入れています。

自動再生や音声ミュートなど、必要に応じて後ほど紹介する属性を指定してあげます。
 

(参考)mp4ファイルのブラウザ対応状況

mp4ファイルのブラウザ対応状況
https://caniuse.com/

以前はブラウザ毎に対応している動画形式が異なっていたため、マルチブラウザ対応にするためにいくつかの動画ファイル形式(mp4、movなど)を読み込む必要がありましたが、現在では主要ブラウザのほとんどでmp4が対応しています。

そのため、現在ではmp4形式の動画だけを準備しておけば良いでしょう。

 

 

videoタグで指定できる属性一覧

それではここからはvideoタグで埋め込んだ動画をカスタマイズしていくのに必要な属性を1つずつ紹介していきます。

 

属性 意味
controls コントロールパネルを表示する
autoplay 動画の自動再生を有効にする
muted 動画に含まれる音声を消す
playsinline 動画のインライン再生を有効にする
preload 動画ファイルを事前に読み込むかどうかを設定する
poster 動画が読み込まれている間に表示する画像を指定する

 

1. controls:コントロールパネルを表示する

まず1つ目は、controls属性です。

こちらの属性は指定することで、動画の下にコントロールパネルを表示することができるようになり、動画の再生や音量の調節などができるようになります。

なお、controls属性には値が必要ありません。

 

2. autoplay:動画の自動再生を有効にする

2つ目は、autoplay属性です。

こちらの属性は指定することで、動画の自動再生を有効にすることができます。


 
一部のブラウザ(Chrome70.0など)では、後述する「muted属性」がないと自動再生が有効にならないので、autoplayを使用する際は注意が必要です。

一部のブラウザー (Chrome 70.0 など) では、 muted属性がないとautoplayは動作しません。

引用:<video>: 動画埋め込み要素 - HTML: HyperText Markup Language | MDN

 

3. muted:動画に含まれる音声を消す

3つ目は、muted属性です。

muted属性は指定することで、動画に含まれる音声を消してあげることができます。

今回例で使用している動画は音声がないものを使用していますが、音声付きの動画であれば、コントロールパネルの再生ボタンを押すとデフォルトでは音声も再生されます。

そこで、これが嫌な方はmuted属性を指定してあげると良いでしょう。

 

4. loop:動画の末尾に達すると先頭に戻る

4つ目は、loop属性です。

loop属性は指定することで、動画が終了すると先頭に戻るように設定することができます。

 

5. playsinline:動画のインライン再生を有効にする

5つ目は、playsinline属性です。playsinline属性を使用することで、動画のインライン再生を有効にすることができます。

iOSのSafariなどで動画を再生すると、デフォルトでは以下のように拡大画面が表示されて動画が表示されるようになっています。

iOSのSafariなどで動画を再生するとデフォルトでは拡大画面で動画が表示されるようになっている

そこで、全画面表示をさせずに動画を再生させたい場合は、playsinline属性を指定します。
 

6. preload:動画ファイルを事前に読み込むかどうかを設定する

6つ目は、preload属性です。

preload属性は指定することで、再生ボタンを押す前から動画ファイルを読み込むかどうかを設定することができます。

この属性で指定できる値は下記の通り。

意味
none 事前に動画ファイルを読み込まない(再生ボタンを押した際に読み込みを開始する)
metadata 動画のメタデータ (長さやサイズなど) のみ事前に読み込む
auto(初期値) 動画ファイルを事前に読み込む

事前に読み込むとスムーズに動画が再生されますが、その分ページの読み込み速度に影響するため、重い動画などは必要に応じて「none」にしておくことをおすすめします。

なお、autoplay属性が指定されている場合は「preload="none"」の指定が無視されて、動画ファイルの事前ダウンロードが行われます

autoplay属性はpreloadより優先します。autoplayを指定すると、言うまでもなくブラウザーは動画を再生するためにダウンロードを始めなければなりません。

引用:<video>: 動画埋め込み要素 - HTML: HyperText Markup Language | MDN

 

7. poster:動画が読み込まれている間に表示する画像を指定する

7つ目は、poster属性です。

poster属性を指定すると、動画が読み込まれている間や動画ファイルが読み込みできなかった場合に表示する画像を指定することができます。

なお、poster属性を使用して表示させる画像の縦横比率は動画の縦横比率に合わせるようにしましょう。

 

 

mp4形式なのに埋め込んだ動画が見れない場合の対処法

使用している動画がmp4形式なのに埋め込んだ動画が見れない…場合があります。

これは同じmp4でもコーデックによって動画の圧縮形式が異なることが原因です。※コーデックとは、エンコード(圧縮)とデコード(復元)をおこなうプログラム

なお、現在多くの主要ブラウザでサポートされているコーデックは「H.264形式」のものになるので、mp4なのに埋め込んだ動画が見れない方は自身の動画のコーデックを確認して、「H.264形式」で書き出すようにすると良いでしょう。

mp4 プロパティ

(参考)動画、MP4形式なのに再生できない!|めも352

 

 

まとめ

まとめです。今回はHTMLで動画を埋め込む際に使用するタグ「videoタグ」の使い方について紹介しました。

 
なお、YouTubeなどの動画サイト上にアップロードされている動画などであれば、動画サイトの埋め込み機能を利用して、動画をWebサイトに埋め込むことも可能です。

しかし、数秒〜2,30秒程度の小さい動画であれば、YouTubeを利用しなくても、videoタグを利用して簡単にmp4などの動画をサイト表示させることができます。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-HTML