さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】動画の再生(video)

Pocket
LINEで送る

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以降

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容