Video/Audio要素を用いた動画再生
従来は、Webサイト上での動画を提供する際は独自のフォーマットを利用しており、動画再生の際はそれぞれのフォーマットに合わせてAdobe Flash Player、Apple QuickTime、Microsoft Windows Media PlayerやSilverlightといった独自のソフトウェアまたは、プラグインを用いる必要がありました。
HTML5ではメディア機能が追加された事により、<video>タグを使用することでプラグインのインストールを行うことなく、ブラウザで動画やオーディオを再生することができるようになっています。
Video/Audio要素のマークアップ方法
HTML5では動画ファイルは<video>タグを、オーディオファイルは<audio>タグを用いてwebページに埋め込むことが可能です。
<video src="samplemov.mp4"></video>
<audio src="sampleaudio.mp3"></audio>
このようにHTML5では非常にシンプルに動画ファイル、オーディオファイルWebページに埋め込むことが可能となっています。
未サポートブラウザへの対応
現在は主要なブラウザにおいては<video>タグがサポートされていますが、未だ全てのブラウザが対応している状態ではありません。その為、<video>タグがサポートされていないブラウザでアクセスされた際はメッセージを表示することでユーザーに通知する事ができます。
また、動画ソースのダウンロードリンクも合わせて記載することで<video>タグ非対応ブラウザ利用ユーザーにもより親切な対応ができるかと思います。
<video src="samplemov.mp4"> お使いのブラウザはvideoタグに対応しておりません<br> ムービーダウンロードは<a href="../video/sammplemov.mp4">こちら</a> </video>
また、再生できる動画ファイル、オーディオファイルの形式は各ブラウザによって異なります。
| ブラウザ | フォーマット | ||
| H.264(mp4) | Ogg Theora(ogv) | WebM/vp8(webm) | |
| Internet Explorer(9以降) | ○ | × | × |
| FireFox(4以降) | × | ○ | ○ |
| Chrome(6以降) | ○ | ○ | ○ |
| Safari (4以降) | ○ | × | × |
| Opera(10.6以降) | × | ○ | ○ |
| ブラウザ | フォーマット | ||
| 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: Chromeでcontrolsを設定した場合の表示
poster - ムービーがロードできなかった際に表示される静止画
<video>タグのposter属性を用いて、ユーザー環境で利用できる動画が無い場合に代替として表示させる画像ファイルを指定することができます。
<video src="samplemov.mp4" autoplay controls poster="sample.jpg"></video>
以下の表はVideo/Audioタグで利用できる主な属性の一覧となります。
| 属性 | 内容 |
|---|---|
| src | 動画/音声データのURL |
| poster(※) | 動画/音声データを利用できない場合に、代わりに使用する画像 |
| preload |
動画データの自動ロード方法 指定可能な値は
省略時の動作はブラウザに依存します |
| autoplay | ロード完了時の自動再生 |
| loop | 繰り返し再生 |
| controls |
コントロールGUIの表示 表示されるGUIはブラウザに依存します |
| width(※) | 動画の幅(ピクセル)(videoのみ) |
| height(※) | 動画の高さ(ピクセル)(videoのみ) |
| mediagroup | メディアリソースをグループ化し、自動的に同期を取るために利用 |
(※がついているものはvideoタグでのみ設定可能です。)
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
