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

杉山貴章(オングス)
2008-09-17 12:00:00
  • このエントリーをはてなブックマークに追加

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 動画の再生に合わせてカウンタの値が変わる
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]