Firefox 3.1のHTML 5対応--video/audio要素のサポート

杉山貴章（オングス）
2008-09-08 14:52:02
本連載ではFirefox 3.1におけるHTML 5対応を紹介してきたが、今回は目玉機能のひとつであるvideo/audio要素のサポートについて解説する。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

JavaScriptで再生／停止ボタンを実装する

　HTML 5におけるvideo要素は、HTMLVideoElementインタフェースとして定義されている。これはHTMLMediaElementのサブインタフェースであり、両インタフェースで動画コンテンツのための様々な情報を定義している。

　control属性を付加しない場合、HTMLMediaElementのplay()メソッドやpause()メソッドを呼び出すことにより、動画の再生や一時停止を行うことができる。

　リスト3はJavaScriptを利用して独自の再生／停止ボタンを実装した例である。ブラウザでは図3のように表示される。［再生］／［停止］ボタンのクリックで、それぞれHTMLVideoElementのplay()メソッド／pause()メソッドを呼び出すようになっている。

リスト3 再生／停止ボタンを独自に実装




  
    
    
    
    videoタグの使用例

    
  

  

    
videoタグの使用例
図3 controls属性を付けない場合、動画上のコントロールボタンは表示されない 図3 controls属性を付けない場合、動画上のコントロールボタンは表示されない
※ブラウザで表示を確認する

　次回も引き続き、HTML 5におけるvideo/audio要素の使用方法について紹介したい。

  • 新着記事
  • 特集
  • ブログ