ZeroPlus Media > Web制作 > HTML/CSS > HTML5でvideoタグを使って動画を埋め込む方法を簡単解説！

HTML5でvideoタグを使って動画を埋め込む方法を簡単解説！

2022/01/04

2023/04/14

Webサイトでは情報を適切に、分かりやすく伝える必要があります。
Webサイトで伝えている情報の"分かりやすさ"はSEOの観点からも重要視されています。

一般的に、人間が1分間で読むことができる文字数は600文字程度と言われています。
一方、動画は文字数に換算すると180万文字程度の情報を伝えることができると言われています。
テキストと比べて300倍の情報を伝えられる動画をWebサイトに導入することは、必須と言っても過言ではありません。

たくさん情報を伝えることができる動画をWebサイトに埋め込むために使用するタグとして、videoタグとiframeタグがあります。

今回はvideoタグを使って動画を埋め込む方法と、videoタグに使われる属性も一緒に解説していきます！

videoタグには属性が多くありますが、使い方は簡単ですので一気に覚えていきましょう！

videoタグの属性一覧

controls
autoplay
loop
poster
playsinline
widthとheight
preload
muted

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

HTML5でvideoタグを埋め込む簡単な方法
videoタグ使用上の注意点
まとめ

HTML5でvideoタグを埋め込む簡単な方法

videoタグの基本書式は、以下の記述になります。

<video src="○○○○.mp4" 属性名></video>

動画形式は.mp4です。例えば、以下のように記述します。

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

.video {
  width: 500px;
}

出力結果

videoタグを記述したとしても属性を記述しないと、動画の冒頭0秒部分の静止画が表示されます。動画を動かすためには、videoタグの中に「属性」を記述しなければなりません。

videoタグで使用できる属性一覧

以下が、videoタグで使用できる属性の一覧になります。

controls：コントロールパネルを表示する
autoplay：自動再生する
loop：繰り返し再生する
poster：開始画面の画像を設定する
playsinline：インライン再生を可能にする
widthとheight：横幅と高さを指定する(※ 指定できるのはpxのみ)
preload：動画の読込を設定する(※ 事前に読み込ませるかどうか指定できる)
muted：動画再生時にデフォルトでミュートにする

これら属性について一つずつ解説していきます！

videoタグの属性：controls

音量調節、再生・停止ボタン、再生位置のバーなどコントローラー機能が動画の下部に表示されます。こちらは、ブラウザごとに異なるコントローラーが表示されます。
背景に動画を埋め込むなどの場合は、こちらの属性を指定する必要はありません。

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

出力結果

videoタグの属性：autoplay,muted

autoplay属性は、Webページが読み込まれ、動画が再生可能な状態になったら自動再生されます。ただし、一部のブラウザ（Chromeブラウザなど）に関しては、同時にmuted属性を付与しないと再生されません。mutedは、動画の音声を消音にすることができます。

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

出力結果

videoタグの属性：loop

属性の名前のとおり、動画が最後まで再生されると自動的に最初に戻って動画が再生されます。

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

出力結果

videoタグの属性：poster

動画が再生されない場合に、その代わりとして表示させる画像を指定することができます。

<video class="video" src="video/video1.mp4" poster="images/sample.png"></video>

出力結果

今回は"video/video1.mp4"の代わりに"images/sample.png"が表示されています。

videoタグの属性：playsinline

動画をインラインで再生するために指定します。インラインで再生するとは、全画面表示せずに再生することです。こちらは、主にモバイル対応するために指定することが多いです。

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

出力結果

videoタグの属性：widthとheight

横幅と高さを指定できます。単位はpxのみです。

<video class="video" src="video/video1.mp4" autoplay muted width="1000px"></video>

出力結果

なお、こちらはCSSで適用したwidthを指定していません。

videoタグの属性：preload

あらかじめ動画を読み込んでおくかどうかを指定します。preloadは、以下の3つが適用できます。

none：事前読み込み禁止
metadata：長さやファイルサイズのようなメタ情報のみ読み込む
auto：初期値　動画ファイルを事前読み込みする

<video class="video" src="video/video1.mp4" muted preload="auto"></video>

preloadはautoplay属性が指定されている場合は、無視されます。

videoタグ使用上の注意点

動画自体の容量は、少なくとも1~5MB程度まで抑えることに留意しなければなりません。動画の容量が重いと、動画がいつまでも再生されないことがあります。特にモバイル端末では、その点に注意しなければなりません。

画質が良い動画は、容量が重い傾向があります。画質の良い動画を見せたいか、それとも画質を抑えて動画を早く見せたいか、をどちらか選択しなければなりません。

動画がの読み込みに時間がかかってしまうと、サイトの表示スピードが低下します。表示スピードは2秒までだと直帰率は9%ほどですが、3秒を超えると一気に直帰率が増え、5秒になると38%まで増えるという調査結果が出ています。（Does Page Load Time Really Affect Bounce Rate? - Pingdom Royaより）

動画の容量が大きく、表示スピードが3秒を超えてしまうのであれば、画質を抑えるようにしましょう。