6月
4
2012

HTML5で動画再生

HTML5では、任意の動画フォーマットを文書に埋め込むためのvideoタグが追加されています。
このvideoタグを使用することで、ユーザーにプラグインをインストールしてもらうことなく、
HTMLからシンプルに動画を扱えるようになります。

videoタグの使い方

シンプルな記述例

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

動画の再生候補を複数提示する方法

<video>
<source src='sample.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src='sample.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

ブラウザは記述された順に、再生可能なデータを利用します。

動画コントローラを表示する

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

controls属性を指定すると、
再生・一時停止・再生位置の移動・ボリュームなど、 動画を利用しやすくするインターフェースを、ブラウザが自動で表示します。

表示されたときに自動再生する

<video src="sample.ogv" autoplay></video>

動画をあらかじめ読みこむ

<video src="sample.ogv" preload="none"></video>

preload属性を指定すると、ウェブページを読み込んだ時点で動画を裏側で読み込みます。 動画をあらかじめ読み込んでおくことで、ユーザーが再生ボタンを押したときに動画の再生がスムースになるかもしれません。 ただ、初期値はpreload=”auto”で、一般的なブラウザではpreload属性を指定しなくても動画はあらかじめ読み込まれます。
もし、ユーザーが動画をあまり必要としていないことが想定される場合や、ウェブサーバに余分な負担を掛けたくない場合には、 preload=”none”を指定すると良いでしょう。
また、preload=”metadata”を指定すると、動画全体ではなく、 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得します。

videoタグがサポートされていない環境への対応

メッセージ表示

<video src="sample.mp4">
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

画像表示

<video src="sample.ogv" poster="firstframe.jpg"></video>

poster属性で画像を指定します。

動画フォーマット

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

H.264

特許取得済みのビデオコーデック。Theoraよりも優れた品質を実現していると評価されており、AppleやMicrosoftなどソフトウェアベンダが推奨している。

Theora

VP8ビデオコーデックを採用したオープンビデオコーデック。GoogleによってOSSとして公開され、多くのプロジェクトやベンダがサポートを表明している。ただし、特許問題をクリアしているのか疑問視する声もある。

WebM

VP8ビデオコーデックを採用したオープンビデオコーデック。GoogleによってOSSとして公開され、多くのプロジェクトやベンダがサポートを表明している。ただし、特許問題をクリアしているのか疑問視する声もある。

HTML5 Video提供サービス

Youtube

H.264,WebM
http://www.youtube.com/html5

Vimeo

H.264
http://vimeo.com/

ブラウザ対応状況

http://caniuse.com/#search=video

参考URL

http://today-only.net/html5-video/
http://www.html5-memo.com/video/basic01/
http://www.htmq.com/html5/004.shtml
http://news.mynavi.jp/articles/2010/06/02/html5-vi……index.html
http://www.slideshare.net/naotori/html5-5311711
http://video-analytics.jp/

コメントする

メールアドレスは公開されません。

このエントリーをはてなブックマークに追加