【HTML5】動画の再生(video)
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以降
コメントを残す