ユーザーID パスワード

技術情報

  • FAQ よくある質問
  • 個人ユーザー向けサービスのお手続きについて
  • M2Mソリューション
  • (PR)FAQを利用してお問い合わせコスト削減

コード&コラム Web編 〜実践!HTML5〜

第1章 Audio/Video

1 |2 |3 次へ

Video/Audio要素を用いた動画再生

従来は、Webサイト上での動画を提供する際は独自のフォーマットを利用しており、動画再生の際はそれぞれのフォーマットに合わせてAdobe Flash Player、Apple QuickTime、Microsoft Windows Media PlayerやSilverlightといった独自のソフトウェアまたは、プラグインを用いる必要がありました。

HTML5ではメディア機能が追加された事により、<video>タグを使用することでプラグインのインストールを行うことなく、ブラウザで動画やオーディオを再生することができるようになっています。



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

HTML5では動画ファイルは<video>タグを、オーディオファイルは<audio>タグを用いてwebページに埋め込むことが可能です。

  • 動画ファイル(samplemov.mp4)の埋め込み
    <video src="samplemov.mp4"></video>
    

  • オーディオファイル(sampleaudio.mp3)の埋め込み
    <audio src="sampleaudio.mp3"></audio>
    

このようにHTML5では非常にシンプルに動画ファイル、オーディオファイルWebページに埋め込むことが可能となっています。



未サポートブラウザへの対応

現在は主要なブラウザにおいては<video>タグがサポートされていますが、未だ全てのブラウザが対応している状態ではありません。その為、<video>タグがサポートされていないブラウザでアクセスされた際はメッセージを表示することでユーザーに通知する事ができます。
また、動画ソースのダウンロードリンクも合わせて記載することで<video>タグ非対応ブラウザ利用ユーザーにもより親切な対応ができるかと思います。


<video src="samplemov.mp4">
    お使いのブラウザはvideoタグに対応しておりません<br>
    ムービーダウンロードは<a href="../video/sammplemov.mp4">こちら</a>
</video>

また、再生できる動画ファイル、オーディオファイルの形式は各ブラウザによって異なります。


表1. 各ブラウザの対応動画フォーマット
ブラウザフォーマット
H.264(mp4) Ogg Theora(ogv) WebM/vp8(webm)
Internet Explorer(9以降)××
FireFox(4以降)×
Chrome(6以降)
Safari (4以降)××
Opera(10.6以降)×


表2. 各ブラウザの対応オーディオフォーマット
ブラウザ フォーマット
Ogg Wav Mp3
Internet Explorer(9以降) ×
FireFox(4以降) ×
Chrome(6以降)
Safari (4以降) ×
Opera(10.6以降) ×

このように各ブラウザによって対応している動画フォーマットが分かれている事から、HTML5では予め複数の動画フォーマットを用意し、<source>タグを用いて動画を埋め込む手法が一般的となっています。


<video>
    <source src="./media/samplemov.mp4" type="video/mp4" />
    <source src="./media/samplemov.ogv" type="video/ogg" />
    <source src="./media/samplemov.webm" type="video/webm" />
    <p>お使いのブラウザはvideoタグに対応しておりません</p>
</video>


様々なVideoタグ属性

<video<タグには、動画再生の詳細を指定する以下の属性があります。

autoplay属性 - 動画の自動再生

autoplay属性を指定することにより、Webページを読み込まれたタイミングですぐに動画が再生されます。


<video src="samplemov.mp4" autoplay></video>

preload - 動画の自動ロード

preload属性を指定することで動画ロードの指定が行えます。
初期値はpreload="auto"となっています。
また、preload="metadata"と指定すると動画のサイズ、長さなどのメタデータのみ事前にロードします。


<video src="samplemov.mp4" autoplay preload="none"></video>

controls - コントロールGUIの表示

controls属性の指定により、再生・一時停止・再生位置の移動・ボリュームなど、 動画コントロールのGUIが自動で表示されます。
尚、表示されるGUIはブラウザによって異なります。


<video src="samplemov.mp4" autoplay preload="none" controls></video>

図1

図1: Chromeでcontrolsを設定した場合の表示

poster - ムービーがロードできなかった際に表示される静止画

<video>タグのposter属性を用いて、ユーザー環境で利用できる動画が無い場合に代替として表示させる画像ファイルを指定することができます。


<video src="samplemov.mp4" autoplay controls poster="sample.jpg"></video>

以下の表はVideo/Audioタグで利用できる主な属性の一覧となります。


表3. Video/Audioタグで利用できる主な属性一覧
属性 内容
src 動画/音声データのURL
poster(※) 動画/音声データを利用できない場合に、代わりに使用する画像
preload 動画データの自動ロード方法
指定可能な値は
  • none:読み込み無し
  • auto:読み込み有り
  • metadata:メタデータのみ読み込み
の3種類
省略時の動作はブラウザに依存します
autoplay ロード完了時の自動再生
loop 繰り返し再生
controls コントロールGUIの表示
表示されるGUIはブラウザに依存します
width(※) 動画の幅(ピクセル)(videoのみ)
height(※) 動画の高さ(ピクセル)(videoのみ)
mediagroup メディアリソースをグループ化し、自動的に同期を取るために利用

(※がついているものはvideoタグでのみ設定可能です。)


サンプルコード

第1章
Audio/Video

第2章
Canvas

第3章
Photo Gallery

第4章
神経衰弱ゲーム