HTML5では「video要素」が追加され、Flashなどのプラグインを利用しなくても動画の再生が行えるようになった。ただ、まだ発展途上であり、ブラウザにより動作が異なる点もあり、利用には注意を要する。
- 基本的な使い方
新たに導入された要素’video’を使って、
<video src="xxx.mp4" autoplay>
と記述してページを表示すれば、xxx.mp4の再生が自動的に始まる。autoplayは自動再生を指示する属性で、これ以外に次の属性がある。
・controls:再生・一時停止などのGUIを表示する
・poster:ユーザに内容を知らせるヒントとなる画像を指定する。(ブロードバンド環境ではおそらく不要と思われる)
・preload:あらかじめ動画を読み込むかを指定。(デフォルトでtrueなのでおそらくそのままでよい)
ブラウザによってサポートするコーデックが異なるため、1つの動画ファイルで全てのブラウザに対応するのは難しい状況で、現時点では複数の形式で用意しておくのが一般的なようだ。具体的には、source要素を使って複数のsrcを記述することで対応する。
<video> <source type="video/mp4" src="xxx_x264.mp4"> <!-- for chrome --> <source type="video/webm" src="xxx.webm"> <!-- for firefox --> <p>No available data</p> </video>
これにより、ブラウザが複数の候補から再生可能な形式を探してくれる。(上から順に調べるので、記述順序がそれなりに重要。) また再生可能な形式がない場合はp要素で指定した内容が表示される。
自動再生ないしはユーザの直接操作によらない場合は、コードで動画を再生することになる。再生したいvideo要素に videoHTML5というid名を付けた場合、以下のようにして再生する。
// JavaScript版 var video = document.getElementById("videoHTML5"); video.play(); // jQuery版 var playerH5 = $('#videoHTML5').get(0); playerH5.play();
control属性をtrueにすることで表示される「プレイヤー」はブラウザが提供しているものなので、ブラウザの種類によって当然異なる。(左がchrome、右がfirefox)
動画形式によっては、サーバ側の設定(.htaccess)が必要な場合がある。現在画像の置き場所に使っているサーバは、webM形式の動画は対応していなかった。