絶対に覚えておきたいHTML5の『video要素』超基本を知る!!

video要素について

今回はHTML5新要素の中でも注目度が高い「video要素」の基本的な記述方法をご紹介します。

video要素はFlashなどのプラグインを使用することなく動画をウェブ・ページに表示することができます。ですが、IEが8まで対応していないことなどから動画コンテンツはまだまだFlashを使ったものが多いように感じます。今後ブラウザの対応が進めば、video要素を使った面白い動画コンテンツがドンドン出てくると思いますので、その時にコンテンツ制作に関わったりアイデアを出せるように今から少しずつ学んでいこうと思います。

video要素の再生とブラウザ表示

video要素をただ再生するにはsrc属性に再生する動画ファイルを指定するだけです。試しにsrc属性にMP4形式のファイルを指定しブラウザでの表示確認をしてみます。また、controls属性を指定することで再生・停止ボタンなどのインターフェースを表示することができます。video要素の主な属性については下表を参照ください。

属性 説明
src 再生したい動画ファイルへのパスを指定します。
poster 動画が再生可能になる前に動画のヒントとなる画像ファイルを指定します。
preload 動画ファイルの読み込みを制御します。
『’none’』・・・動画の再生時まで読込まない。
『’metadata’』・・・動画ファイルのメタ情報のみ先に読込む。
『’auto’』・・・動画ファイルを先に読み読込む。
※これらの指定は完全に制御されるものではないようです。またautoplay属性が指定されているときは無視されます。
autoplay 動画ファイルが再生可能になった場合に、自動で再生を行うかを指示する論理属性。
loop 再生が終了後に、再び最初から再生するかを指示する論理属性。
controls 再生や停止ボタンなどのユーザーインターフェースの表示を指示する論理属性。
width 値をセットすることで動画の横幅を指定できます。
height 値をセットすることで動画の縦幅を指定できます。

属性を確認しましたので、ブラウザでの表示を確認したいと思います。ここで確認したブラウザはcromeとFirefoxです。

【HTML】

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

ブラウザの表示確認

cromeではビデオプレーヤーが表示されていますが、Firefoxではプレイヤーが上手く表示されていないのが確認できます。これはaudio要素のときにも起こった現象と同様にMP4形式にFirefoxが対応していないために起こっています(※Firefoxがvideo要素に対応していないということではありません)。このようにブラウザ毎にファイル形式が異なっているのが現状です。下記に代表的なコーデック(ビデオのエンコード方式)を示しました。

代表的なビデオのコーデック

  • 『 H.264/AAC(.mp4), Theora/Vorbis(.ogv), VP8/Vorbis(.webm) 』

source要素を使用する

ブラウザ毎に対応しているファイル形式が異なっていることから、現状(2011年11月)でvideo要素を使用するには複数のビデオファイルを用意しブラウザ毎に対応する必要がでてくることになります。そこで複数のビデオファイルを指定するためにsource要素を使用します。

属性 説明
src 動画ファイルへのパスを指定します。
type 動画ファイルのMIMEタイプを指定します。
media 動画ファイルのメディアタイプを指定します。

【HTML】

<video controls>
   <source src="video/sample.mp4" type="video/mp4">
   <source src="video/sample.ogv" type="video/ogg">
   <source src="video/sample.webm" type="video/webm">
   <p>※ご利用のブラウザでは再生することができません。</p>
</video>

source要素はvideo要素の中に記述しsrc属性に再生するファイルを指定することでブラウザは上から順に再生可能かをチェックしていきます。尚、要素に対応していないブラウザでは全て無視され、その後ろに記述された要素が表示されるようになります。

ブラウザの表示確認

今回はFirefoxもちゃんとプレイヤーが表示されました。尚、IE9の表示も確認したかったのですが環境がなかったのですみません。また、現在(2011年11月)のvideo要素の主な対応状況は下画像の通りです。

video要素の対応状況

video要素をJSで制御する

ここまでcotrols属性を指定することで各ブラウザが用意したvideo要素のインターフェースが表示され、再生・停止が行えることを確認しました。ですが、HTML5ではメディアを自由に扱うことのできるAPIがいくつも規定されています。各ブラウザ共通の動画プレイヤーを作成することはもちろん再生速度の変更・字幕を入れるなど多くのことができるようになります。

今回は基本を学ぶことをテーマにしていますのでそこまではメモしていきませんが、今後少しずつ難しいことにも挑戦しつつ記事にしていきたいと思います。最後にJSを用いて再生・停止とループ処理の制御をしてみたいと思います。

【HTML】

<video id="video" width="640" height="360">
   <source src="video/sample.mp4" type="video/mp4">
   <source src="video/sample.ogv" type="video/ogg">
   <source src="video/sample.webm" type="video/webm">
   <p>※ご利用のブラウザでは再生することができません。</p>
</video>

<input type="button" onClick="videoPlay()" value="再生">
<input type="button" onClick="videoPause()" value="停止">
<input type="button" onClick="videoLoop()" value="ループ再生">

【JavaScript】

//再生開始
function videoPlay(){
	document.getElementById("video").play();
}

//再生を停止
function videoPause(){
	document.getElementById("video").pause();
}
//ループ再生
function videoLoop(){
	document.getElementById("video").loop = true;
}

上記のように動画の再生・停止はdocument.getElementById(“ID”)を使いvideo要素のDOMを取得し『play()』メソッドで再生し、停止には『pause()』メソッドを実行することで制御できます。また、loopプロパティをtrueにすることで動画はループ再生されます。

今回でvideo要素の基本的な書き方が分かってきましたので、今度はAPIを使って簡単な動画コンテンツを作成してみたいなと考え中です。その際にはブログにメモを残しますのでよろしくお願いします。

しかし便利なように見えるvideo要素ですが、現状はIE9からの対応となっているので実務ではまだまだ使いづらく、PCはフラッシュ動画、iphoneやipad用に別途動画ファイルを直接mp4を参照させたり、youtubeにアップした動画を読み込む方が現実的ではあると思います。

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

Amazonへ

ブログを作成する際に参考にした本はこちらにまとめてあります。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事