<video>

動画を埋め込む

HTML 5 ~ 利用可能

最終更新日: 2020.04.17

どんなタグ?
動画を埋め込む時に使うタグ。

コードサンプル
<video src="./sample.mp4″></video>

<video(ビデオ)> タグは、 <video> ~ </video>で挟まれた範囲に、動画再生できるメディアプレーヤーを埋め込むタグです。

どのカテゴリに属しているの?
video 要素は フロー・コンテンツ, フレージング・コンテンツ, エンベデッド・コンテンツ というコンテンツ・カテゴリに属しているタグです。”controls”属性を持つ場合は、対話的コンテンツおよび知覚可能コンテンツにも属します。
梱包できるタグは?
video 要素に梱包できるタグコンテンツ・モデルは、 src属性を持つ場合は、0個以上の track 要素と video、audio以外の透過的コンテンツを梱包可能です。 src属性を持たない場合、0個以上の source 要素と video、audio以外の透過的コンテンツを梱包できます。です。

さおりメディアプレーヤーを準備しなくてもいいから便利!

どうやって使うの?
<video> タグを書いて、
再生する動画を指定する。

video 要素は <video> タグに、src 属性で再生する動画を指定、もしくは、<video></video> の中に、source 要素を使って再生する動画を指定します。

基本的な使い方
<video src="動画ファイルのパス"></video>
コードサンプル
<video src="sample.mp4″><video>
ブラウザでの表示例
https://codehero.shibajuku.net/html/video/video-sample/

さおり動画はあきさん(@nabeweb0928)が作成してくれました!!


source要素を使った使い方
<video>
  <source src="動画ファイルのパス" type="形式">
  video要素に対応してないブラザでの代替えテキスト
</video>
コードサンプル
<video autoplay muted controls>
  <source src="sample.mp4″ type="video/mp4″>
  <source src="sample.webm" type="video/webm">
このブラウザでは対応していません。
</video>
ブラウザでの表示例
https://codehero.shibajuku.net/html/video/video-sample03/
どこでも使えるの?
sampleタグは 埋め込みコンテンツを受け入れるすべての要素 が配置できるところならどこでも使えます。

さおり動画ファイルをvideoタグで囲むだけで動画を埋め込むことができます。

使える属性は?
グローバル属性はもちろん、
src 属性はほぼ必ず使います。

<video> タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。

autoplay (オートプレイ) 属性

自動再生をさせる属性です。データの読み込みが終わり、再生できる状態になった時点ですぐに再生が始まります。
最近のブラウザの仕様で一緒に muted 属性も設定しないと自動再生できません。

属性値
autoplay初期値
自動再生します。

src (ソース) 属性

再生する動画を指定する属性です。
video 要素のブロック内で<source> を使用することもできます。

属性値
ファイルのパス初期値
再生する動画へのパスを指定します。

preload (プレロード) 属性

動画を予め読み込んでおくかどうかする属性です。

属性値
auto初期値
動画を見ていない時でも、ファイル全体をダウンロードする
none
動画を事前に読み込まない
metadata
動画の長さなどのメタデータを読み込む

loop (ループ) 属性

ループ再生をさせる属性です。最後まで再生すると自動で最初に戻り繰り返し再生されます。

属性値
loop初期値
ループ再生します。

controls (コントロール) 属性

 動画の再生、一時停止などの操作するインターフェースを表示します。

属性値
controls初期値
コントロールパーツを表示します。

muted (ミュート) 属性

 動画をミュート再生します。

属性値
muted初期値
ミュート再生します。

poster (ポスター) 属性

 動画のヒントとなる画像を表示します。動画が再生されるまで表示されます。

属性値
画像ファイルへのパス初期値
画像へのパスを指定します。

playsinline (プレイインライン) 属性

要素の再生エリア内で動画を再生する場合指定します。

属性値
playsinline初期値
要素の再生エリア内で再生します。

サンプルが見たい
<video>タグを使ったサンプルを
いくつか紹介。

<video> タグを使ったサンプルを紹介します。

基本的な<video>タグのサンプル

コードサンプル
<body>
  <video src="sample01.mp4″></video>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/video/video-sample/

autoplay 属性, muted 属性を使ったサンプル

コードサンプル
<body>
  <video src="sample01.mp4″ autoplay muted></video>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/video/video-sample02/

さおり最近のブラウザ事情により、autoplayする場合はmutedにしないと自動再生してくれません…

デフォルトスタイルは?
元サイズの動画ファイルを表示

一般的なブラウザでは、元サイズの動画ファイルをビデオプレイヤーで表示します。
なお、コントローラーの見た目は、ブラウザによって異なります。
Chrome、Safariでは下記のデフォルトスタイルがあたります。

sample要素のデフォルトスタイル
video {
  object-fit: contain;
}

対応ブラウザは?
モダンブラウザは問題なし!

<video>タグは HTML5以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar 9 ~
Edge
Edge 12 ~
Google Chrome
Google Chrome 4 ~
Firefox
Firefox 3.5 ~
Safari
Safari 4 ~
Opera
Opera 11.5 ~

さおり最後に動画を作成してくれたあきさん(@nabeweb0928)、動画素敵すぎます!!

このリファレンスを書いた人

さおり

さおり

元医療機器CE・インフラ営業企画→家族の転勤をきっかけにフリーランスのコーダーになった人。 JavaScript、PHP、WordPressなどプログラミング好きです!!

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて