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にログインしてコメントする

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