こんばんは！
今日は、昨日のHTML5で追加されたセクションに続き、
動画再生や音声再生ができる「video」「audio」要素などを復習します。
HTML5の動画・音声再生
HTML5よりも以前のバージョンでは、Webページで動画や音声を再生するために、再生用のプログラムが必要でした。
たとえば、object要素はローカル環境にインストールしたFlash Playerなどのプラグインを使用して動画を再生させていましたが、この方法はユーザーがプラグインをインストールする必要がありました。
そこでHTML5で新しく追加されたのが、動画を再生できる「video」要素と音声を再生できる「audio」要素です。
これらの要素を使用することで、プラグインをWebブラウザにインストールしなくても簡単に動画や音声を再生できるようになっています。
とても便利な要素ですが、特許の関係でWebブラウザによって再生できる動画ファイルや音声ファイル形式が異なるという問題があります。
たとえば、動画ファイルは、ChromeやSafari、IE9以上ではMPEG-4形式に対応していますが、FireFoxやOperaは対応していないので、再生できません。
FireFoxやOperaで再生するには別途、Oggファイルを用意します。
音声についても同様で、FireFoxはMP3に対応しておらず、別途Oggファイルを用意します。
つまり、すべてのWebブラウザで問題なく再生するには、複数の形式のファイルを準備して、一つひとつコーディングするので、作業が多少面倒になります。
Webブラウザの対応状況を以下にまとめましたので参考にしてください。
Webブラウザ別対応一覧
動画
| MPEG-4 | Ogg | WebM | |
| IE | 9以上 | ||
| Firefox | 3.5以上 | 28以上 | |
| Chrome | 4以上 | 4以上 | 25以上 |
| Safari | 3.2以上 | ||
| Opera | 10.5以上 | 16以上 | |
| iOS | 3.2以上 | ||
| Android | 4.4以上 |
音声
| MP3 | WAV | ACC | |
| IE | 9以上 | 9以上 | |
| Firefox | 3.5以上 | ||
| Chrome | ○ | ○ | ○ |
| Safari | 3.1以上 | 3.1以上 | 3.1以上 |
| Opera | 14以上 | 11以上 | 14以上 |
| iOS | ○ | ○ | ○ |
| Android | 4.x以上 | 4.x以上 | 4.x以上 |
動画ファイルの指定と設置方法 video要素
Webページに動画を配置するには、video要素を使用します。
| <video src=”URL（ファイルの場所）” 属性></video> |
video要素に指定できる属性
- src属性
表示する動画のURLを指定 - poster属性
動画が再生可能な状態になるまでの間、別の画像などを代わりに表示させます - preload属性
動画データを自動読み込みを設定
（自動読み込みをしない場合は「none」、自動再生する場合は「auto」、メタデータのみ読み込む場合は、「metadata」）。
※video要素で配置した動画は、デフォルトでは自動読み込みとなります。
受信環境によっては動画が重くなるので、自動読み込みさせないよう「preload=”none”」と指定しておくほうがよいでしょう。 - controls属性
動画再生時にユーザー側で停止、再生できるコントロールを表示。 - width/height属性
表示領域をピクセル単位で指定。指定しない場合は、動画ファイルの大きさで表示。
source要素を利用して複数の動画ファイルを配置
先述のとおり、video要素はプラグインが不要ですが、Webブラウザごとにサポートしているファイル形式が異なるため、source要素を使用して、再生するメディアファイルを複数指定します。
source要素はsrc属性、type属性と併せて使用します。
| 【Sampleコード】 <video controls> <source src=”（ファイルのディレクトリ）” type=”video/mp4″> <source src=”（ファイルのディレクトリ）” type=”video/ogg”> <source src=”（ファイルのディレクトリ）” type=”video/webm”> <p>ご利用のブラウザでは動画を再生できません。最新のブラウザに更新されることをおすすめします。</p> </video> |
音声ファイルの指定と設置方法 audio要素
Webページに音声を配置するには、audio要素を使用します。
| <audio src=”URL（ファイルの場所）” 属性></audio> |
audio要素に指定できる属性
- src属性
表示する音声のURLを指定 - preload属性
音声データを自動読み込みを設定
（自動読み込みをしない場合は「none」、自動再生する場合は「auto」）。 - controls属性
音声再生時にユーザー側で停止、再生できるコントロールを表示。
表示する場合は、controlsと記述する。
source要素を利用して複数の動画ファイルを配置
audio要素もvideo要素と同様にプラグインが不要ですが、Webブラウザごとにサポートしているファイル形式が異なるため、source要素を使用して、再生するメディアファイルを複数指定します。
source要素はsrc属性、type属性と併せて使用します。
| 【Sampleコード】 <audio controls> <source src=”（ファイルのディレクトリ）” type=”audio/wav”> <source src=”（ファイルのディレクトリ）” type=”audio/acc”> <source src=”（ファイルのディレクトリ）” type=”audio/mp3″> <p>ご利用のブラウザでは音声を再生できません。最新のブラウザに更新されることをおすすめします。</p> </aoudio> |
IE8以下やMP3未対応でも再生できる「audio.js」
「audio.js」を使用すれば、MP3ファイルに対応していないブラウザやaudio要素に対応していないIE8以下でも、MP3ファイルを再生ができます。
【audio.jpダウンロードサイト】
http://kolber.github.io/audiojs/
