SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ここが違う!サンプルで見るHTML5

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 この連載では、今日のウェブ業界の流行語となっている「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要素で利用することはできません。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
コーデック問題

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ここが違う!サンプルで見るHTML5連載記事一覧

もっと読む

この記事の著者

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

有限会社futomi 代表取締役1971年岐阜県生まれ。ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。2007年にHTML5.JPを開設し、Canvasを使ったJavaScriptライブラリの開発、HTML5の最新情報の発信、HTML5関連仕様の日本語訳を手がける。主な著書に『徹底解説HTML...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5615 2011/01/05 16:46

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング