【特集】

詳解! HTML 5と関連APIの最新動向 - 新タグ&API編

3 Video/Audio要素とそのAPI

白石俊平  [2009/07/31]

3/7

Video/Audio要素のマークアップ方法

Video/Audio要素は、動画データや音声データをHTMLから取り扱えるようにしたものだ。

VideoとAudioの利用法は至って簡単だ。

  1. video/audioタグを記述する
  2. src属性に動画/音声ファイルのURLを指定する

たったこれだけで、動画や音声をWebページ内に埋め込むことができる。また、タグの内部に記述したコンテンツは、video/audioタグをサポートしていないブラウザにとっての代替コンテンツとして利用できる。

<video src="動画ファイルのURL">
  動画を視聴するにはvideoタグをサポートしたブラウザが必要です。
</video>

<audio src="音声ファイルのURL"></audio>

また、リソースの指定をさらに細かく行うためのsource要素もHTML 5から導入された。この要素を使用すると、メディアデータのMIMEタイプやコーデック方法を細かく指定することができる。また、sourceタグは複数指定することが許されている。それらのsourceタグを、ブラウザは記述された順序通りに評価し、ブラウザ自身が取り扱うことのできるメディアデータを自動で判別してくれる。

<video>
  <!-- Ogg theora形式とQuicktime形式のうち、取り扱い可能な方が利用される -->
  <source src='sample.ogv' type='video/ogg; codecs="theora, vorbis"'>
  <source src='sample.mov' type='video/quicktime'>
</video>

とくにvideoタグに関しては、ブラウザごとにサポート状況が大きく異なるため、sourceタグによる複数のフォーマット指定が非常に有効だ。原稿執筆時点での、各ブラウザによる動画形式のサポート状況をまとめたのが以下のリストだ。

  • Firefox 3.5 … Ogg theoraをサポート
  • Safari 4 … QuicktimeとH.264をサポート
  • Google Chrome 3 … Ogg theoraとH.264をサポート

以下に示すのは、video/audio/sourceタグで利用可能な属性の一覧だ。

video/audioタグの属性

属性説明
src動画/音声データのURL
poster動画/音声データを利用できない場合に、代わりに使用する画像のURLを指定する(videoのみ)
autobuffer動画/音声データのバッファリングを自動で開始するかをbooleanで指定する
autoplay再生を自動で行うかどうかをbooleanで指定する
loopループ再生を行うかどうかをbooleanで指定する
controlsブラウザ固有のコントロールUIを表示するかどうか
width動画の幅(ピクセル)(videoのみ)
height動画の高さ(ピクセル)(videoのみ)

sourceタグの属性

属性説明
src動画/音声データのURL
type動画/音声データのMIMEタイプ
mediaこのsourceタグで指定された動画/音声データを利用するメディアタイプ(メディアクエリで指定)

Video/Audioを用いたプログラミング

video/audioタグは、再生や一時停止などの操作をJavaScriptから行うことができる。以下のサンプルでは、独自に定義したボタンで動画の再生と一時停止を行えるようにしている。また、動画の再生が終了したらalertメッセージを出力する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript">
  var video;
  function init() {
    video = document.getElementById("video1");
    // 動画再生が終了したら呼び出されるイベントハンドラの登録
    video.addEventListener("ended", function() {
      alert("終了しました");
    }, true);
    // エラー
    video.addEventListener("error", function() {
      switch (video.error.code) {
      case MediaError.MEDIA_ERROR_ABORTED:
        alert("データのダウンロードが中断されました。");
      break;
      case MediaError.MEDIA_ERROR_NETWORK:
        alert("ネットワークエラーが発生しました。");
      break;
      case MediaError.MEDIA_ERROR_DECODE:
        alert("デコードに失敗しました。");
      break;
      case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
        alert("サポートされていないファイル形式です。");
      break;
      default:
        alert("不明なエラーが発生しました。");
      }
    });
  }
  function play() {
    // 動画の再生
    video.play();
  }
  function pause() {
    // 動画の一時停止
    video.pause();
  }
  function fastforward() {
    // 動画の早送り(Firefoxでは動作しない)
    video.playbackRate += .2;
  }
</script>
</head>
<body onload="init()">
  <!-- controls属性がある場合、ブラウザネイティブのコントロールが表示される -->
  <!-- Safariの場合はOggビデオが再生できないので差し替えること -->
  <video id="video1" controls src="http://upload.wikimedia.org/wikipedia/commons2/Apeldoorn_Oranjepark.ogv">
  </video><br/>
  <button onclick="play()">再生</button>
  <button onclick="pause()">一時停止</button>
  <button onclick="fastforward()">早送り</button>
</body>
</html>

実行結果

3/7

インデックス

目次
(1) はじめに - 本特集の趣旨
(2) HTML 5マークアップについての簡易リファレンス
(3) Video/Audio要素とそのAPI
(4) Canvasタグ
(5) 大幅に強化されたフォーム要素
(6) アウトラインを意識したマークアップ
(7) ドラッグ&ドロップAPI

もっと見る

関連キーワード


IT製品 "比較/検討" 情報

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

特別企画 PR

人気記事

一覧

イチオシ記事

新着記事

JR東日本E721系1000番台、4両固定編成の新造車両導入 - 719系は順次廃車に
[19:19 5/26] ホビー
外食売上高、5カ月連続増 - ファーストフード好調
[19:17 5/26] マネー
【レポート】飲み過ぎ注意とアドバイス!? 健康管理アプリを配信するキリンの狙い
[19:16 5/26] 経営・ビジネス
オンキヨー、太鼓芸能集団「鼓童」とコラボしたハイレゾDAP&イヤホン
[19:12 5/26] 家電
[PS4]4000万台突破 歴代PSハードの最速ペース維持
[19:08 5/26] ホビー

特別企画 PR

求人情報