【HTML】videoタグの使い方まとめ!属性なども解説

今回はHTMLのvideoタグの使い方を紹介します。

 

videoタグの使い方

videoタグの基本的な書き方はこんな感じです。

<video src="movie.mp4"></video>

 

videoタグ内にsrc属性で動画のソースを書きます。

また、ユーザーが動画を閲覧する環境によっては動画が再生されないことを考え、<source>タグを使って複数の動画形式を指定することもできます。

<video>
  <source src="movie.mp4" />
  <source src="movie.webm" />
</video>

 

ただ、実際はほぼ全てののブラウザが.mp4に対応しているので、<source>タグを使って複数指定しなくてもほとんど問題ないと思います。

 

videoタグの属性

videoタグには様々な属性が用意されているので、順番に解説していきます。

 

controls

操作パネルを表示します。

<video src="movie.mp4" controls></video>

 

muted

無音で動画を再生します。

<video src="movie.mp4" muted></video>

 

autoplay

ページの読み込み時に自動で再生します。

<video src="movie.mp4" autoplay></video>

 

loop

自動で繰り返し再生します。

<video src="movie.mp4" loop></video>

 

preload

再生するファイルを事前に読み込みかどうかの指定をします。

以下のような値があります。

  • none:動画が再生されるまで何もダウンロードしない
  • metadata:メタデータ(動画のサイズ、トラックリスト、再生時間 等)のみダウンロードする
  • auto:動画データ全体をダウンロードする
<video src="movie.mp4" preload="auto"></video>

 

poster

動画が再生されない場合や再生の準備が整うまでの間に表示する画像を指定することができます。

<video src="movie.mp4" poster="image.png"></video>

 

playsinline

iOSブラウザでvideoタグをインライン再生するようにします。iOS10から対応しています。

<video src="movie.mp4" playsinline muted></video>

 

再生範囲を指定する

videoタグ(audioタグ)では動画を開始する時間と終了する時間を指定して、動画内の特定の範囲だけ再生することができます。

※IE/Edgeは非対応です

<video src="movie.mp4#t=[starttime], [endtime]"></video>

例えば「movie.mp4#t=5,10」と書くと、5秒時点から10秒時点の範囲を再生することができます。

 

videoタグをJavaScriptで操作する

videoタグの属性はそれぞれJavaScriptで操作することもできます。

先ほどIE/Edge再生範囲の指定はできないと説明しましたが、JavaScriptを使った再生範囲の指定ならIE/Edgeでも可能です。

// idが「video」の要素を取得
var video = document.getElementById('video');

// 自動再生する
video.autoplay = true;

// 繰り返し再生する
video.loop = true;

// 無音で再生する
video.muted = true;

// 再生位置を指定する
video.currentTime = 5;

 

その他の属性の指定の仕方は以下の記事で詳しく解説してあるので、参考にしてください。

JavaScriptでvideoを操作する

 

注意点

スマホで検索する人がかなり多い時代なので、動画の自動再生は極力控えたほうがいいかもしれません。スマホで動画を再生するとかなり通信容量を消費するので。

ついでに動画のサイズも出来るだけ小さくした方がいいですね。

 

また、Androidでvideoタグを使った動画再生をする場合は、Basic認証をかけていると再生されないという点に注意してください。

解決する方法はあるので安心してください。以下のサイトが参考になります。

videoタグを使いBasic認証をかけてスマホで起こる不具合を回避