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

杉山貴章（オングス）
2008/09/17 12:00

HTML 5の新機能として注目されているvideo/audio要素のサポート。今回はHTMLMediaElementオブジェクトが持つ情報を扱う例を紹介する。

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

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

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

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

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

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Language" content="ja" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>videoタグの使用例</title>

    <script type="text/javascript">
      onload = function() {
        var tid = setInterval(state_update, 100);
      }

      // 情報の更新
      function state_update() {
        var video = document.getElementById("sampleVideo");
        var count = document.getElementById("count");
        count.innerHTML = video.currentTime; 
      }
    </script>
  </head>

  <body>

    <h1>videoタグの使用例</h1>

    <video controls 
           src="http://upload.wikimedia.org/wikipedia/commons/d/d6/Victoria_falls.ogg" 
           id="sampleVideo" 
           autoplay="true">
    </video>

    <p>カウント：<span id="count">0.00</span></p>

  </body>
</html>

これをFirefox 3.1 alpha 2で表示すると図1のようになる。なお、この例のように<video>要素にautoplay属性を指定しておくと、ページのロードと同時に自動的に再生を開始するようになる。

図1 動画の再生に合わせてカウンタの値が変わる 図1 動画の再生に合わせてカウンタの値が変わる
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
アプリケーション UI iPhone 3G 脆弱性 Opera Ajax Windows Vista linux リファレンス Windows Windows XP google iPhone ブラウザ データベース Tips Windows 7 Webサービス Microsoft javascript プログラミング言語 Chrome マイクロソフト Internet Explorer クラウド RIA iPod touch OS インストール ソフトウェア開発 セキュリティ Database Flash java Safari Off Topic 小技 Webデザイン Apple Firefox 3 php HTML オープンソース WebKit Firefox 開発環境 Mac OS X Mozilla CSS 仮想化
  • 話題のタグを見る »