メディア関連の要素
HTML5 のメディア 新要素とは、一般的に、 video 要素と、 audio 要素を指します。
video 要素
video要素はFlashなどのプラグインや、Youtube などのiflameを使用することなく動画を
ウェブ・ページに表示することができます。 しかし、未だIE8までは、対応しておらず、
JSなど補助的なデーターが必要になることから動画コンテンツはまだFlashや、動画サイトの
iflameを使ったものが多いようです。
Video の再生
video要素をただ再生するにはsrc属性に再生する動画ファイルを指定するだけです。
試しにsrc属性にMP4形式のファイルを指定しブラウザでの表示確認をしてみましょう。
1 <video src=”images/sample.mp4” controls></video>
また、controls属性を指定することで再生・停止ボタンなどのインターフェースを 表示することができます。
41
video 要素の主な属性
属性 説明
src 再生したい動画ファイルへのパスを指定します。
poster 動画が再生可能になる前に、動画のサムネイルのように表示しておく画像ファイルを用意し
ておいて、その画像をタグの中で指定します。
preload
動画ファイルの読み込みを値によって制御します。
『’none’』の時は動画の再生時まで読込まない。
『’metadata’』の時は動画ファイルのメタ情報のみ先に読込む。
『’auto’』・・・動画ファイルを先に読み読込んで、自動再生。
※これらの指定は今のところ完全に制御されるものではなく、ＵＡによって違いがあるよう です。またautoplay属性が指定されているときは無視されます。
autoplay 動画ファイルが再生可能になった場合に、自動で再生を行うかを指示する論理属性。
loop 再生が終了後に、再び最初から再生するかを指示する論理属性。
controls 再生や停止ボタンなどのユーザーインターフェースの表示を指示する論理属性。
source Video要素の中に、複数のデーターを記述し、出力可能なデータータイプを提示する属性。
width 値をセットすることで動画の横幅を指定できます。
height 値をセットすることで動画の縦幅を指定できます。
コーデックの問題対応
ＵＡの種類によっては、表示されるビデオデーターに制限があったりします。
その際には、属性のposterなどを使った一時的に画像を表示させておく処置をすることは できますが、根本的な解決ではなく、ＶＩＤＥＯとしての機能は使えないこともあります。
その際、まずは、複数のvideo ソースと、エラーメッセージを読み込ませることも可能です。
※ コーデックとは、PCの様々なデーターの形式（符号化）の違いによる
表示処理と、対応ソフトなどの問題で、ここでは、VIDEO形式と、AUDIOの データー圧縮形式の違いのことを言う。
WebM ファイル - Vp8 動画コーデックと Vorbis 音声コーデック
.MP4、3ogv、MOV ファイル - H.264、MP4 動画コーデック、AAC 音声コーデックを通常サポート
.AVI - 多くのカメラでこの形式を出力、通常は MJPEG 動画コーデックと PCM 音声コーデック
.WMV- Windows Media Player用の動画コーデックと音声コーデック
42
.FLV - Adobe FLV1 動画コーデック、MP3 音声コーデック 通常は上記の上3つのデーターを利用することが多い。
1 <video controls>
2 <source src="video/sample.mp4" type="video/mp4">
3 <source src="video/sample.flv" type="video/flv">
4 <source src="video/sample.webm" type="video/webm">
5 <p>※ご利用のブラウザでは再生することができません。</p>
6 </video>
前記のようなコードの場合、上から順にソースを読み込み、表示可能なものを表示し、
すべて表示できないときには、最後のエラーコメントを表示させます。
video 要素を実装する
1. <video width="640" height="360" preload="auto"
2. poster="aaa.png" controls>
3. <!-- ↓mp4形式の動画に対応しているブラウザ用 -->
4. <source src="hoge.mp4" type="video/mp4;">
5. <!-- ↓ogv形式の動画に対応しているブラウザ用 ->
6. <source src="hoge.ogv" type="video/ogg;">
7. <!-- ↓WebM形式の動画に対応しているブラウザ用 -->
8. <source src="hoge.webm" type="video/webm;">
9. <!-- ↓video要素に対応していないブラウザ用 -->
10. <p>お使いのブラウザーでは動画を再生できません。
11. <a href="sample_dl.html">ダウンロード。</a></p>
12. </video>
実際に実装してみると、上記のような記述が多くなるように思います。
また、開くと自動的にVideoが流れるようにするなら、autoplayを記述してください。
43
audio 要素
audio要素もプラグインや、Youtubeなど様々な音声データーを手軽にオンラインで再現、
表示させるための新しい要素です。
基本的にvideo要素の使い方と変わりません。
audio の再生
audio 要素とvideoの相違点もちろん取り扱うデーターの違いはありますが、それ以外、
音声データーは、表示する為の幅などサイズを記述する必要はありません。
1 <audio src=”music/sample.mp3” controls></audio>
上記の表現一行で再生できますが、Video同様、audioソース種別対応と、エラーの際の メッセージも用意しておくといいでしょう。
1 <audio controls>
2 <source src="audio/sample.mp3" type="audio/mp3">
3 <source src="audio/sample.ogg" type="audio/ogg">
4 <source src="audio/sample.wav" type="audio/wav">
5 <p>※ご利用のブラウザでは再生することができません。</p>
6 </audio>
Audio要素で使えるファイル形式
WAV (16bit/44.1kHz/stereo)
AIFF (16bit/44.1kHz/stereo)
MP3 (16bit/44.1kHz/128kbps/stereo)
OGG (16bit/44.1kHz/128kbps/stereo)
AAC (16bit/44.1kHz/128kbps/stereo)
FLAC (16bit/44.1kHz/stereo)
一般的なものは、MP3ですが、これも聴くことのできないブラウザがあります。
上記のソースのように2~3種類選ぶことで、ほとんどのブラウザをカバーすると良いでしょう。
44
描画エリア要素 canvas 要素
Canvasとは、ブラウザ上に図を描くために策定された仕様です。
これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を 用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを 実現するために、FlashやJavaアプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことがで
きます。
Canvasを使う準備
Canvasを利用して２Dのグラフィック（図形）を書いてみます。
canvas内で2Dグラフィックを描画する大まかなステップ
1. HTMLタグ、canvasをマークアップ（記述する）。
2. canvasのDOM(ドキュメントオブジェクトモデル) をgetElementById または、
document.querySelectorにて取得。
DOM：プログラミング記述をインターフェイスに表示させる要素を参照する為の機能。
3. 描画コンテキストをgetContext()メソッドで、引数”2d”を渡して取得。
4. 描画に関するメソッドでグラフィックスを表現。
このような流れで進めていきます。
まずは、HTML タグで、canvas のエリアを指定します。
<canvas width=”ピクセル数値” hright=”ピクセル数値”> </canvas>
このようにキャンバスに利用する範囲を記述します。
次に JavaScript の書きだして、キャンバス内に DOM の記述を入れます。
var canvas = document.querySelector("canvas");
描画の JS を直接記述する場合は、document.querySelector("canvas");
描画の JS に ID を引用する場合は、getElementById ("id 名"); を利用します。
次にキャンバス内に描画する為のコンテキストの設定を記述します。
var context = canvas.getContext("2d");
2d の平面図形を描画する為の準備を記述します。
45