|
HTML5＋CSS3 |
HTML5編
|
| Lesson 9 | 新機能の使用方法(2) video要素 |
|||
| 制作・文 | 菅沼辰弥（株式会社ロクナナ） |
| これまで動画をページ内に埋め込む場合はFlashが多用されてきた。しかしHTML5では新たにvideo 要素が策定され、Flashを使わなくてもページに動画を埋め込めるようになった。 |
video要素の
基本的な使い方
video要素はaudio要素ととてもよく似ていて、属性も同じものが使える。実際にタグを書くと【1】のようになる。
audioにないvideoの属性にはwidth、height、posterがある。posterは動画が何らかの理由でロードされなかった場合に、代替表示される画像を指定すること ができる【2】。各ブラウザで対応しているファイル形式に違いがあり、推奨される標準規格が未定のままだという状況はaudioと同じだ。昨今の動画サイトブームもあって音声ファイルよりも動向が注目されている。
video でもやはりaudio と同じようにsource要素を用いて複数の形式のファイルを指定することができる。それぞれ動画を用意する手間はあるが、どのブラウザでも対応できるように設置することが可能だ【3】【4】。
【1】
【2】
【3】
【4】Chromeにおける表示例
【4】FireFoxにおける表示例
【4】Internet Explorerにおける表示例
【4】Operaにおける表示例
【4】Safariにおける表示例
JavaScriptで
制御
video 要素はcontrols 属性がなくてもJavaScript で制御できる。play() やpause() などの簡単な操作をするスクリプトは、前項で紹介しているaudioのソースをそのまま使えるので割愛する。ここでは動画のコントローラらしく、シークバーを作成して自由に再生位置を移動でき るようにしてみる。
HTML にはinput 要素のrange を用意 する【5】。range は新しく策定されるinputタイプで、いわゆるスライダーコントロールである。ボタンを左右にスライドさせてminの値からmaxの値までを取得するinput要素だ。このスライダーにシークバーの機能を実装していく。
JavaScriptではまず、動画の長さを取 得してinput要素のmax 属性に渡す必要がある。動画の長さはvideo.durationで取得できるのだが、動画の情報がダウンロードできていないと当然durationの取得もできない。そこでvideo.readyStateを使って、動画の情報をどこまでロードできているのかを判断する。readyState は動画のダウンロード状況を数値で返すプロパティで、0はまだ何もダウンロードされていないことを示す。1以上であればメタデータがダウンロードされているので、その場合はseekbar.max にvideo.durationを代入することができる。
readyStateで0が返ってきた場合は、loadedmetadataイベントが起こるタイミングで代入するように記述するとうまく動作するはずだ。loadedmetadata は、動画のメタデータがロードできた時に発行されるイベントである。
次はシークバーを操作したときの動作を実装する。シークバーを操作したときに発行されるchangeイベントを使い、シークバーのvalueをcurrentTimeに代入する。これだけでシークバーを使って再生位置を操作することが可能になった。 最後に再生位置と連動してシークバーも移動するように実装する。videoの再生取得位置が変化した際に発行されるtimeupdateイベントで、currentTimeをvalueに代入するように記述するとシークバーの完成だ【6】【7】。
【5】
【6】
【7】
VideoJSを使って
コントローラーを統一
以上のようにコントローラを独自に作成することはそれほど難しいことではないが、あらゆるブラウザに対応させようとすると、どうしても作業工数がかかってしまう。そのような場合は、VideoJSのようなライブラリを利用するとよいだろう【8】。これを使うと、各ブラウザのコントローラを容易に統一できる。さらに、HTML5 に対応していないブラウザの場合はFlashを表示させることもできるので、ほぼすべてのブラウザで動画を再生できるようになる。
【8】http://videojs.com/
