[65] 動画をプラグイン無しで組み込もう video要素・source要素

今回の <video>要素と、次回の <audio>要素は、
「メディア要素（Media Element）」と言われ、どちらもHTML5からの新要素です。
メディア要素には共通の属性 src, controls , autoplay, loop, muted, preload, mediagroupがあり、<video>要素には、poster, width, height属性もあります。

まず今回の<video>要素は、動画をプラグイン無しで再生させるための要素です。

<source>要素はメディア要素の子要素で、複数のメディアソースを指定します。

<video> <audio> 要素は、src属性で1つしかメディアファイルを指定できませんが、
<source>要素を併用して複数指定することもできます。

使用する要素	<video> 〜 </video> <source>（空要素。終了タグは不可）

<video>の属性 （一覧はこちら）	src	：組み込むファイルのURL
	controls	：コントローラを表示
	width	：表示させる幅をピクセルで
	height	：表示させる高さピクセルで
	poster	：ロード中に表示するトップ画像のURL
	autoplay	：自動再生する
	loop	：ループ再生する
	muted	：ミュート（消音）で再生する
	preload	：プリロードするかどうか
	mediagroup	：複数のメディアを同期させる
	グローバル属性

<source>の属性	src	：組み込むファイルのURL
	type	：組み込むファイルのMIMEタイプ
	media	：メディアタイプを指定。デフォルトはall
	グローバル属性

また、<track>要素もメディア要素の子要素で、字幕を出したりできます。
（ <track>については後日詳細）

本日のINDEX

1. <video>要素だけで動画を組み込んでみよう（src属性で1コだけ）
2. <source>でファイルを複数指定（<video>のsrc属性は使わないこと）
3. <video>に未対応のブラウザのために代替コンテンツに<embed>を入れておこう
4. おすすめの動画変換ソフト「Miro Video Converter」
5. いわゆるコーデック問題について
6. サーバの「 .htaccess ファイル」に type を追加する

<video>要素だけで動画を組み込んでみよう

<video>要素の使い方はとてもシンプル。
src属性で動画ファイルのURLを指定し、 width と height属性で幅と高さのサイズを指定します。
controls属性をつければ、ブラウザがコントローラを表示してくれます。
poster属性は静止画像を指定できます。これがロード中の表示画面になり、src属性で指定したファイル形式をブラウザがサポートしない時は、そのまま代替画像になります。

<video>要素に対応していない古いブラウザでは、この↑代替画面すら表示されないので、古いブラウザ用に <video>〜</video>内に代替コンテンツを入れることができます。
代替コンテンツはテキストでも良いのですが、<embed>要素を入れるほうが親切かもしれません。

サンプルです。これは画像↓　クリックで別ウィンドウで開きます。

HTMLはこちら↓

<video src="uchiage.mp4" width="640" height="360" controls poster="img/vid_img.jpg" preload="auto">
  <p>このブラウザは動画再生に対応していません</p>
</video>
<!--中に入れたテキストは video要素に対応していない古いブラウザ用です-->
<!--代替えコンテンツはテキストよりembedのほうが親切ですね-->

ブラウザ（のバージョンが古いもの）によっては、<video>要素に対応しているが、MP4は再生できないということもあります。
プラグイン無しで動画を再生するということは、ブラウサに依存するということですが、
ちょっと前までは、各ブラウザの開発元でイロイロあって、HTML5標準の動画形式を決められなかった（いわゆるコーデック問題。後述） んです。

ですが、<source>要素を使えば、複数のファイルを指定できるので、どのブラウザでも動画を再生できます。
（同じ動画を、複数の異なるファイル形式で保存しておく必要があるけどね）

<source>でファイルを複数指定すればOK

では、<video>要素内に <source>要素で複数のファイルを指定してみましょう。

例えば、MP4（IE, Chrome, Safari が先にサポート）形式と、WEBM（Chrome, Firefox, Opera が先にサポート）形式のファイルを指定しておけば、<video>要素に対応してるどのブラウザでも、ちゃんと再生できるようになります。（MP4とOGV（Chrome, Firefox, Opera がサポート）という組み合わせもアリ。詳細後述）

サンプルです。これは画像です↓　 クリックで別ウィンドウで開きます。

HTMLはこちら↓

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
  <p>このブラウザは動画再生に対応していません</p>
</video>
<!--中に入れたテキストは video要素に対応していない古いブラウザ用です-->

<source>要素を使う時は、<video>要素にsrc属性を使っちゃダメ。
使うとエラーになります。src以外の属性（controls, poster など）はOK。

<source>要素では、src属性でファイルのURLを、type属性でMIMEタイプを指定。
ここまでで、たいていの最新ver.ブラウザで再生できます。

さらに、<source>要素の media属性で、メディアタイプを指定することもできます。

<video>に未対応のブラウザのために代替コンテンツに<embed>を

<video>内に入れる未対応ブラウザ向けの代替コンテンツを、テキストでなく <embed>要素にしてプラグインで動画を再生できるようにすれば、古いブラウザでも動画を見ることができます。
<video>に対応したブラウザでは、中の<embed>は無視されます。

サンプルはこちら。これは画像です↓　クリックで別ウィンドウで開きます。

HTMLはこちら。

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
  <embed src="uchiage.mp4" width="640" height="380" type="video/mp4" autoplay="false" 
   controller="true" pluginspage="http://www.apple.com/jp/quicktime/download/">
</video>

おすすめの動画変換ソフト「Miro Video Converter」

<source>要素で複数のファイルを指定する場合は、同じ動画内容でファイル形式が違うファイル（最低2コ）を、サーバに上げておくので、動画ファイルを違う形式に変換する必要があります。

そのとき使う動画変換ソフトでおすすめは、
「Miro Video Converter」

フリーソフトで、どんな形式の動画も MP4、WebM、Ogg Theora に変換できます。
サイズ（画面アスペクト比）も自由に指定できたり、Android、iPhone、iPad用に変換できます。使い方もとても簡単。見ればすぐわかります。

動画ファイルの形式と、いわゆるコーデック問題について

注：この項は、初回投稿は2013年12月でしたが、その後、Mozilla と Opera が MP4 を採用したので、若干書き直しています。（2019年1月記）

動画や音声ファイルには「コーデック」と呼ばれる方式があります。
動画や音声のエンコード・デコード（圧縮・解凍）方式が「コーデック」。

「コンテナ（音声と動画のファイルをセットにして格納するためのフォーマット）」も含めて「コーデック」と言ったり、種類によっていろいろみたいです。

動画のコーデックの代表的なものは、次の3つだそうです。

H.264（エイチ ニーロクヨン）

これは「MPEG-4 AVC」と同じモノ（AVCは、Advanced Video Coding の略）
いわゆるMPEG4、MP4と読んでるやつ。拡張子は「.mp4」

ITU-T（国際電気通信連合(ITU)の電気通信標準化部門）で勧告されたビデオコーデック。
高画質で圧縮率が高いのが特徴で、高品質でも軽い。
デジタルビデオカメラやワンセグ放送もこのフォーマットだそうです。Flashのプラグインもこれを使っているとか。
ロイヤリティあり。

Ogg Theora（オッグ シオラ）

いわゆるOGVってやつ。拡張子は「.ogv」（.oggは非推奨だって）
動画圧縮はTheora、コンテナフォーマットにOgg bitstream formatを使った動画形式。
同じコンテナで Vorbis、Speex、FLACなどがありますが、Theoraが HTML5標準の採用候補になったんだそうです（候補から外れたって噂もあるけど、ブラウザはサポートしてるし現状使える）。

OggはXiph.Org Foundationによって規格化されたコンテナフォーマット。
Ogg Theora は、圧縮率で H.264 に劣る（ちょっと重い）のだそうです。オープンソース（ロイヤリティ無し）

WEBM（ウェブエム）

グーグルが開発した動画形式。ビデオコーデックにVP8、音声コーデックにVorbis、コンテナにMatroskaのサブセットを使った形式。拡張子は「.webm」

高品質でロイヤリティフリーの動画形式を目指してグーグルが作ったもの。
でも、「VP8」はグーグルが買収した会社のコーデックなんだけど、これに特許問題が起こったりしてちょっとモメてたとか（2013年3月に決着したそうです）。オープンソース（ロイヤリティ無し）

で、いわゆるコーデック問題なんですが、
最初、Microsoft と Apple が「H.264」をサポートすることにしたそうです。
Google も YouTube 買ったときに YouTube で「H.264」を採用したそうです。

でも「H.264」はロイヤリティが発生するので、お金のある Microsoft、Apple、Google はいいけど、オープンソースでやっている Mozilla Firefox はムリ。Opera も同じ。
なので Mozilla と Opera はオープンソースの「Ogg Theora」を採用したんだって。

ただ、「H.264」はネット動画配信ではライセンスは無料とかで、採用すれば必ずお金がかかるというわけでもないらしい。Mozilla と Opera はオープンソースじゃないのがイヤみたい。

で、Google は「H.264 はロイヤリティがかかる。Ogg Theora は圧縮率が少し悪い。ロイヤリティ無しで高品質なのを自分らで作ろう」ということで「WEBM」を開発。
Mozilla と Opera もこの考えに賛同して「WEBM」を採用したんだそうです。

その後、Mozilla と Opera が H.264をやっぱり採用することになり、今の 各ブラウザのサポート状況はこうなっているそうです。
（2018年6月時点。参考：audio及びvideoで対応しているメディア形式 | MDN）

	H.264 (.mp4)	Ogg Theora (.ogv)	WEBM (.webm)
IE	○	×	△
Safari	○	×	△
Chrome	○	○	○
Firefox	○	○	○
Opera	○	○	○

サーバの「 .htaccess ファイル」に type を追加

これけっこう大事かも。
<source>要素で MP4 と WEBM を指定したのに「Firefoxで読めるはずのWEBMが読めない！」なんて時は、ファイルをアップしたサーバが、動画ファイルを認識してない可能性が大です。（私のサーバは、OGV、WEBMを認識していませんでした）

この場合は、サーバの .htaccess ファイルに AddType を追記してやります。
サーバのルート（第1階層）にある .htaccess ファイルを、FTPソフト上で編集するか、ダウンロードして編集します。

ダウンロードするなら、OSによっては、最初に「.（ピリオド）」のあるファイル名では不可視ファイルになるので、ダウンロードする前に「.」をFTPソフト上で取ってからダウンロードしよう。　
編集後アップロードしたら、先頭に「.」を付け足しておくのを忘れずに！

以下のように、「AddType」に続けて、MIMEタイプとファイルの拡張子を、半角スペースで区切って記述します。1行に1つずつ、改行しながら複数指定します。

AddType video/ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4
             #この最終行の空きも重要だったりします

最後の行が、この .htaccess ファイルの最終行ならば、空白の1行を足しておこう。
.htaccess は、リターン（改行）で解釈される場合があるので、
最後の行が認識されないことを避けるために、こうしたほうが無難なのだそうです。
空白行でエラーになることは無いそうですので、入れておこう。

コメントを入れたい時は先頭に「#（ハッシュ）」をつけます。
先頭に#を付けた行がコメントになります。

# BEGIN video_type
AddType video/ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4
# END video_type

mediagroup属性で同期させることも

メディア要素は、mediagroup属性で同じグループ名を付けた動画どうし、動画と音声、音声どうしがグループとして扱われ、同期再生などができます。
この属性、今のところ Chromeしか対応していないようです。

mediagroup属性に関しては、<audio>要素も関わってくるので、
次回の<audio>要素の次の、[67] で紹介します。

<video>の属性一覧

src="URL"

組み込むファイルのURL。
<video>要素はsrcは1つしか指定できないので、複数指定する場合は、ここでは指定せず<source>要素で複数指定する。

<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop
  preload="auto" ></video> 

controls（または「controls=""」「controls="controls"」 ）

コントローラーを表示。ユーザが再生・ポーズ・音量調整などを行える 。

<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop
  preload="auto" ></video> 

width="表示させる動画の幅" 　height="表示させる動画の高さ"

表示させる動画の幅、高さをピクセルで指定 。

<video src="ex.mp4" controls width="640" height="360" poster="ex.jpg" autoplay loop
  preload="auto" ></video> 

poster="画像のURL"

動画が再生可能になるまで表示させるトップ画像（静止画面）のURLを指定。
ブラウザが動画形式をサポートしていない場合は、この画像が代替画像になる。

<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop
  preload="auto" ></video> 

autoplay（または「autoplay=""」「autoplay="autoplay"」 ）

ロード後すぐに自動再生する 。

<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop
  preload="auto" ></video> 

loop（または「loop=""」「loop="loop"」 ）

ループ再生する 。

<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop
  preload="auto" ></video> 

muted（または「muted=""」「muted="muted"」 ）

消音再生する 。

<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop muted>
</video> 

preload="none" または "metadata" または "auto"

3つの値のいずれかで、ブラウザにプリロードに関してのヒントを指定。
（実際にプリロードするかどうかはブラウザに依存するんだそうです）

• none：必要になったら初めて読み込む
• metadata：メタ情報のみプリロード
• auto：ブラウザにおまかせ（プリロードしてもOK）

<video src="ex.mp4" controls width="640" height="380" poster="ex.jpg" autoplay loop
  preload="auto" ></video> 

mediagroup="グループの名前（任意）"

この属性で同じグループ名を付けた動画どうし、動画と音声、音声どうしがグループとして扱われ、同期再生などができる。
今のところChrome以外は「mediagroup.js」が必要。

<video src="ex1.mp4" controls mediagroup="sample"></video>
<video src="ex2.mp4" mediagroup="sample"></video> 

mediagroup属性に関しては [67] でサンプルを紹介します。

このほかグローバル属性も使います

id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は同じメディア要素の<audio>要素です。
<audio>要素は、音声をプラグイン無しで再生させるための要素です。
使い方は今回の<video>要素とほとんど同じです。