Firefox 3.1のHTML 5対応--HTMLMediaElementインタフェースの利用

杉山貴章（オングス）
2008-09-17 12:00:00
HTML 5の新機能として注目されているvideo/audio要素のサポート。今回はHTMLMediaElementオブジェクトが持つ情報を扱う例を紹介する。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

HTMLMediaElementオブジェクトの情報を利用する

HTMLMediaElementインタフェースはHTML 5で新たに追加される予定のマルチメディアコンテンツを表すインタフェースである。video要素を定義したHTMLVideoElementインタフェースやaudio要素を定義したHTMLAudioElementインタフェースは、いずれもHTMLMediaElementのサブインタフェースにあたる。

HTMLMediaElementインタフェースのplay()およびpause()メソッドの使用方法については以前の記事でも紹介したが、同インタフェースには他にも動画の情報を保持する様々なプロパティが定義されている。例えば、ネットワークの状態を表すnetworkStateプロパティや動画の準備状態を表すreadyStateプロパティ、状態を定義した各種定数、現在の時間（カウント）を保持するcurrentTimeプロパティなどがある。

リスト1は、HTMLMediaElementオブジェクトからcurrentTimeプロパティの値を取得して動画のカウンタとして表示する例である。setInterval()メソッドを利用したタイマーによって定期的に値を更新するようにしている。

リスト1 currentTimeプロパティの値を表示




  
    
    
    
    videoタグの使用例

    
  

  

    
videoタグの使用例


    

    
カウント：0.00

これをFirefox 3.1 alpha 2で表示すると図1のようになる。なお、この例のように

図1 動画の再生に合わせてカウンタの値が変わる 図1 動画の再生に合わせてカウンタの値が変わる
  • 新着記事
  • 特集
  • ブログ