video要素は、audio要素（音声再生）と共にメディア要素と言われ、どちらもHTML5からの新要素です。
今回は、動画をプラグイン無しで再生させるためのvideo要素についてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
video要素は、動画をプラグイン無しで再生させるための要素です。
そして、メディア要素（video要素とaudio要素）の子要素で、複数のメディアソースを指定するために、source要素という要素もあります。
メディア要素は、src属性で１つしかメディアファイルを指定できませんが、source要素を併用すると、複数のメディアファイルを指定をすることができます。
| video要素の属性 | src属性 | 組み込むファイルのURL |
|---|---|---|
| controls属性 | コントローラを表示 | |
| width属性 | 表示させる幅をピクセルで指定 | |
| height属性 | 表示させる高さピクセルで指定 | |
| poster属性 | ロード中に表示するトップ画像のURL | |
| autoplay属性 | 自動再生する | |
| loop属性 | ループ再生する | |
| muted属性 | ミュート（消音）で再生する | |
| preload属性 | プリロードするかどうか | |
| mediagroup属性 | 複数のメディアを同期させる | |
| グローバル属性 | id属性、class属性、title属性、style属性など | |
| source要素の属性 | src属性 | 組み込むファイルのURL |
| type属性 | 組み込むファイルのMIMEタイプ | |
| media属性 | メディアタイプを指定 デフォルトはall |
|
| グローバル属性 | id属性、class属性、title属性、style属性など |
video要素は、src属性で動画ファイルのURLを指定して、width属性とheight属性で幅と高さのサイズを指定して使用します。
controls属性を指定すると、コントローラが表示されます。
poster属性で静止画像を指定すると、それがロード中の表示画面となり、src属性で指定したファイル形式をブラウザがサポートしていない場合は、代替画像となります。
ですが、video要素に対応していないブラウザでは、この代替画像すら表示されないので、古いブラウザ対策として、<video> ～ </video>間に代替コンテンツを入れます。
video要素で動画を組み込むと、次のように表示されます。
htmlコードは、以下の通りです。
<video src="sample_video.mp4" width="400" height="300" controls poster="sample_image.jpg" preload="auto">
このブラウザは動画再生に対応していません
</video>
動画ファイル（上の例ではMP4ファイル）をサポートしていないブラウザでも、video要素に対応している場合は、poster属性で指定した画像が表示されます。
（video要素にすら対応していないブラウザは、<video> ～ </video>間に設定した代替コンテンツ（上の例では「このブラウザは動画再生に対応していません」）が表示されます。）
source要素は、メディア要素（video要素とaudio要素）の子要素で、複数のメディアソースが指定できる要素です。
video要素のみで動画ファイルを１つ指定した場合、ブラウザによってサポートする動画形式が違うため、指定した動画が再生可能かどうかをブラウザに依存するという難点があります。
その点、video要素と共にsource要素を使うと、複数の動画ファイルが指定できるため、動画が再生できる可能性が限りなく広がります。
（MP4形式と、WEBM形式の動画ファイルを指定しておくと、video要素に対応しているブラウザで、動画が再生できます。）
source要素も使って動画ファイルを複数指定した場合の表示です。
htmlコードは、以下の通りです。
<video controls poster="https://programmercollege.jp/wp/wp-content/uploads/2017/03/colmun_image3200_01.jpg" preload="auto" width="400" height="300" >
<source src="https://programmercollege.jp/wp/wp-content/uploads/2017/03/colmun_image3200_02.mp4" type="video/mp4">
<source src="https://programmercollege.jp/wp/wp-content/uploads/2017/03/colmun_image3200_03.webm" type="video/webm">
このブラウザは動画再生に対応していません
</video>
source要素を使う場合は、source要素でsrc属性を指定するため、video要素のsrc属性は使用しません。
source要素で、src属性の指定（動画ファイルのURL）と、type属性の指定（MIMEタイプ）を行います。
source要素で複数の動画ファイルを指定する場合は、同じ動画内容でファイル形式が違うファイルが必要になるため、動画ファイルを違う形式に変換します。
オンラインで変換可能なサイトやフリーソフト等がありますので、検索してみて下さい。
| src=”URL” |
|---|
|
組み込む動画ファイルのURLを指定 動画ファイルを複数指定する場合は、ここでは指定せずsource要素で指定する <video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> |
| controls または controls=”” または controls=”controls” |
|
コントローラを表示 ユーザが再生・ポーズ・音量調整などを行えるようになる <video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> |
| width=”表示させる動画の幅”、height=”表示させる動画の高さ” |
|
表示させる動画の幅、高さをピクセルで指定
<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> |
| poster=”画像のURL” |
|
動画が再生可能になるまで表示させるトップ画像（静止画面）のURLを指定 ブラウザが動画形式をサポートしていない場合は、この画像が代替画像となる <video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> |
| autoplay または autoplay=”” または autoplay=”autoplay” |
|
ロード後すぐに自動再生する
<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> |
| loop または loop=”” または loop=”loop” |
|
ループ再生する
<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> |
| muted または muted=”” または muted=”muted” |
|
消音再生する
<video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop muted></video> |
| preload=”none” または preload=”metadata” または preload=”auto” |
|
３つの値のいずれかで、ブラウザに対してプリロードの指定を行う （実際にプリロードするかどうかはブラウザに依存） “none”：必要になったら初めて読み込む “metadata”：メタ情報のみプリロード “auto”：ブラウザの仕様通り <video src=”sample.mp4″ controls width=”400″ height=”300″ poster=”sample.jpg” autoplay loop preload=”auto”></video> |
| mediagroup=”グループの名前” |
|
この属性で同じグループ名を付けた動画同志、動画と音声、音声同志がグループとして扱われ、同期再生等が可能となる
<src=”sample1.mp4″ controls mediagroup=”s_group”></video> |
この他に、id属性、class属性、title属性、style属性などのグローバル属性も使います。
（グローバル属性についてはHTML5 【 グローバル属性 】 ～ 全ての要素で使える属性もご参照下さい。）
INTERNOUS,inc. All rights reserved.
