Tweet

Pocket

HTML5において、ブラウザで動画再生を行う為の要素videoをご紹介します。

video要素で再生を行う為、ブラウザ側でプラグインを利用する必要がなく、直接動画を再生出来ます。video要素の基本的な使い方は以下のようになります。

【使用例（基本的）】

<video width="400" height="150" src="sample.mp4" controls="controls" preload="auto" hight="300" poster="img/sample_video.jpg"></video>

video要素のみでは動画の再生、停止等の操作が出来ないので、controls属性を付けて動画再生のためのUIが表示されるようにします。UIはブラウザに内臓されているものが表示されます。

【video要素の属性】
src → 動画ファイルを指定
poster → 動画が再生可能になるまで表示するサムネイル画像を指定
autoplay → 自動での再生を指定。書式は「autoplay」「autobuffer=”autobuffer”」「autobuffer=””」のいずれかで指定
preload → 自動読込を指定。書式は「auto（自動）」「metadata（メタデータのみ）」「none（無効）」で指定
loop → 繰り返し再生の指定。書式は「loop」「loop=”loop”」「loop=””」のいずれかで指定
controls → 再生・停止・音量等の調整を行うコントローラーを表示。書式は「controls」「controls=”controls”」「controls=””」のいずれかで指定
width → 横幅をピクセルで指定
height → 縦幅をピクセルで指定
video要素に対応していないブラウザ向けには、video要素が未対応の場合に表示されるメッセージを含めることもできます。

【使用例（video要素未対応への対応）】

<video width="400" height="150" src="sample.mp4" controls="controls" preload="auto" hight="300" poster="img/sample_video.jpg">
　　ご利用のブラウザでは再生できません。
</video>

上記の例の他にもobject要素でブラウザに動画を表示することも可能です。

【使用例（object要素）】

<video width="400" height="150" src="sample.mp4" controls="controls" preload="auto" hight="300" poster="img/sample_video.jpg">
　　<object data="player.swf" type="application/x-shockwave-flash">
  　　　　<param name="movie" value="sample.swf">
  　</object>
</video>

【対応ブラウザ】
IE9以降、FireFox3.5以降、Opera10.5以降、Safari3以降、Mobile Safari3以降、Chrome3以降