Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

HTML5で実現できるマルチメディア系機能
ここが違う!サンプルで見るHTML5(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/16 14:00

 連載第4回目では、HTML5によってウェブ標準のテクノロジーだけで実現可能となったマルチメディアを取り上げます。新たに導入された、ビデオやオーディオを再生するvideo要素やaudio要素、ウェブページに図を描くcanvas要素について説明します。

目次

はじめに

 この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。

過去の連載も読む

マルチメディアが強化されたHTML5

 HTML5で新たに導入された要素のうち、ビデオやオーディオを再生するvideo要素やaudio要素、そして、ウェブページに図を描くcanvas要素は、もっともウェブ制作者から関心を集める機能といえるでしょう。

 すでにブラウザを使ったビデオ視聴は当たり前となりました。また、動的に図が描画される機能やアニメーションも、今となっては当たり前となっています。この当たり前と思える機能が、HTMLにはサポートされていなかったのです。すでに言及したとおり、HTMLはここ10年ほどほとんど進化しておらず、現代のニーズにまったく応えられていなかったのです。

 こういったマルチメディア系の機能は、Adobe社が提供するFlashや、Microsoft社が提供するSilverlightといったプラグインが担ってきました。しかし、HTML5によって、ようやく、当たり前のように使われてきた機能がウェブ標準のテクノロジーだけで実現できるようになったのです。

ビデオとオーディオ

 video要素の使い方はとても簡単です。

video要素のマークアップ例
<video src="video.mp4" controls></video>
video要素の表示例(Internet Explorer 9 Platform Preview 7)
video要素の表示例(Internet Explorer 9 Platform Preview 7)

 video要素のsrc属性にビデオ・ファイルのURLを指定します。

 video要素をサポートしたブラウザであれば、上図のように、ビデオの下方にビデオを制御するためのユーザーインタフェースが表示されます。このインタフェースはブラウザによって異なりますが、基本的なビデオ操作の機能が組み込まれています。

 video要素にcontrols属性を入れることで、このようなユーザーインタフェースが表示されます。もしマークアップのみでビデオを再生させたいのであれば、controls属性を必ず入れてください。もしこの属性がないと、ユーザーインタフェースが表示されず、利用者はビデオを再生することすらできません。

 なお、audio要素の使い方は、video要素とほとんど同じです。ここでは、video要素を例に解説していきます。

video要素の属性

 video要素には、controls属性の他に、いくつかの属性が規定されています。

video要素の属性
属性 説明
src ビデオ・ファイルのURLを指定します
preload 事前にどれくらいのデータをダウンロードしておくべきかの目安を指定します 指定可能な値は"none"、"metadata"、"auto" のいずれかです autoplay属性が指定されている場合、preload属性は無視されます
autoplay ビデオが再生可能になったら即座に再生を開始することを指示する論理属性です
loop ビデオの再生が終了したら最初に戻って再生を続けることを指示する論理属性です
controls ビデオの再生や停止などのユーザーインタフェースを表示させることを指示する論理属性です
width ビデオの横幅をCSSピクセルで指定します
height ビデオの縦幅をCSSピクセルで指定します
poster ビデオが再生可能になる前に表示させたい画像ファイルのURLを指定します

 audio要素で利用できる属性はvideo要素とほとんど同じですが、ビデオの用途に特化したwidth属性、height属性、poster属性はaudio要素で利用することはできません。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 羽田野 太巳(ハタノ フトミ)

    有限会社futomi 代表取締役 1971年岐阜県生まれ。 ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。 オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。 20...

バックナンバー

連載:ここが違う!サンプルで見るHTML5
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5