組み込みコンテンツ

次は、HTML5で注目されてきた機能の1つです。

それが組み込みコンテンツです。つまり、「音楽」とか「動画」とかをWebサイト上に表示できる機能なのです。

audio要素・video要素

audio要素はその名のとおり、音楽ファイルを再生する要素です。そして、video要素は動画です。

この2つはまとめてメディア要素と呼ばれ、使い方は非常に似ています。

まず、再生するファイルをsrc属性で指定します。もちろんURLです。

次にpreload属性があります。これは、再生するリソースをあらかじめ読み込むかどうかを指定するもので、次の3つのうちどれかです。

none

あらかじめ読み込まず、必要となって初めて読み込む。

ユーザーにあまり使われないか、もしくはサーバーに負担をかけたくないときに使われます。

metadata

ファイル本体は読み込まないけれども、大きさとか長さとかの付属情報は読み込むべきである。

auto

あらかじめファイル全体をダウンロードしておいてもよい。

サーバーの負担が気にする必要がなく、ユーザーの便利さを優先する場合に使われます。

注意すべきなのは、これらが必ずその通りに行われるだけではないということです。ユーザーエージェント（ブラウザなど）はこの属性を参考にするだけであると定められています。

そして、次に論理属性のautoplay属性です。これは、読み込みが完了したら自動的に再生するという意味です。これがある場合、当然preload属性は意味を持ちません。自動的に再生するには、先に全体をダウンロードすることが必要だからです。

また、同じく論理属性のloop属性もあります。これは、最後まで再生し終わったら最初に戻るという意味です。

さらにもう一つ論理属性があります。それはcontrols属性です。これがあると、再生・停止・一時停止ボタンとか、ボリューム調整、再生位置変更など一連の機能を持ったコントロールを表示させることができます。

逆に、これがないと表示されません。ただ、勝手に再生されて止められないというのも困るということで、ユーザーエージェントはそれらの操作をなんとか行えるようにすることが期待されます。

そしてさらに、video要素だけですが、幅・高さを指定するwidth,height属性があります。さらに、video要素だけの属性としてposter属性があります。これは、もし動画データが利用できないときに代わりに画像を表示しておこうということで、その画像のURLを指定します。

source要素

source要素は、audio要素・video要素の子として複数指定できるものです。

ただしsource要素を使う場合、audio・videoのsrc属性を使うことはできません。

source要素は複数まとめて使うことが多いです。これは、audio・videoのsrc属性の代わりとなるもので、再生すべきリソースを指定します。

ところが、1つだけだとブラウザがその動画形式に対応していないことがあるので、source要素を複数使うことで候補を提示し、再生できるものを再生してほしいということです。

そのためsource要素には中身がなく空要素です。

source要素にはsrc属性があり、これがそのsource要素のURLです。

また、ブラウザが対応しているかどうかのヒントとして、type属性でMIMEタイプを指定できます。

mp4ファイルなら"video/mp4"とか、oggファイルなら"video/ogg"、とかです。ongakufairuの場合はmp3ファイルなら"audio/mpeg"などです。

また、必要に応じてtype="video/mp4; codecs="avc1.42E01E, mp4a.40.2""のように、「codecs」というパラメータを付けてより細かく記述することもできます。詳しくは興味があれば調べてみましょう。codecsは""（ダブルクォート）で囲むことがあり、属性を囲む引用符とかぶってしまうから"を使ってみました。一方を「"」にしてもう一方を「'」にすることで実体参照を使わなくてすむという方法もあります。

他にmedia属性というのもあります。これはlink要素のmedia属性と同じもので、そのデータがどのメディアに適しているかを指定します。省略すれば、全てのメディアでOKということになります。

そして、audio要素・video要素の子には何を入れるかというと、前述のsource要素の他、それらに対応していない古いブラウザ用のテキストを入れておいたりすることができます。

<video width="640" height="480" controls></video>

embed要素

embed要素は、外部のアプリケーションなど（プラグイン）を文書中に組み込むために使われます。通常は、HTMLではないものです。代表的なものにFlashがあります。

src属性により、そのアドレスを指定します。また、type属性は、audio・videoのものと同じです。例えばFlashなら"application/x-shockwave-flash"とかです。

他にwidth属性・height属性を持ちます。

embed要素は、audioやvideoと違って空要素です。

他にembed要素の特徴として、プラグインが要求するパラメータを属性を利用して渡すということです。例えば、プラグインが「aaa」というパラメータを要求したとすれば、次のようにして渡します。

<embed src="プラグインのURL" aaa="値">

object要素

object要素は、総合的に外部リソースを表す要素です。img要素（画像）、iframe要素（ブラウジングコンテキスト）、embed要素（プラグイン）くらいは全部object要素で表せます。まあ、このobject要素よりはimg要素などのほうが便利なので一般的にそっちが使われます。

そのリソースのアドレスは、src属性ではなくdata属性で指定されます。そして、type属性でMIMEタイプを指定できます。

リソースがHTML文書などならば、それはiframe要素と同様にブラウジングコンテキストを作るので、name属性でブラウジングコンテキスト名を指定できます。これはiframe要素と同様ですね。

具体的にはこんな感じです。

<object data="http://google.com/" type="text/html"></object>

また、このようにして画像も表示できます。

<object data="画像のURL" type="image/png" width="128" height="128"></object>

width属性・height属性も利用できていることがわかります。

また、embed要素同様に、プラグインがパラメータを要求する場合があります。embed要素の場合は属性に書きましたが、object要素はparam要素を子に入れることでパラメータを渡します。

param要素は空要素で、name属性でパラメータ名、value属性でその値です。つまり、さっきのembed要素のサンプルをobject要素を用いて再現するとこうなります。

<object data="プラグインのURL">
  <param name="aaa" value="値">
</object>

また、object要素は、param要素（あれば）の後に、そのリソースが表示できない場合に表示するものを書くことができます。

MathML

MathMLとは、XMLで数式を表現するための言語です。XMLとは、HTMLと似た言語で、HTML同様にタグを用いて木構造的な関係を表現する言語です。

したがってMathMLはHTMLと似ているということで、HTML中から直接利用することができます。

MathMLはmath要素で利用することができます。math要素の下にMathMLの各種要素を書き並べます。MathMLの書き方自体は解説しないので、調べてみましょう。

例として、「二次方程式の解の公式」をMathMLで表現してみます。

$x=\frac{?b\pm \sqrt{b^2?4?a?c}}{2?a}$

対応しているブラウザなら、というように表示されます。ちなみにこれは、現在（2011年4月23日）唯一きれいに表示できた、Firefox4.0での表示です。

ソースを見てみると分かりますが、たったこれだけなのに結構長いです。

SVG

SVGとは、XMLで画像データを記述する形式です。MathML同様、XMLなのでHTML中に直接書くことができます。

とはいっても、非常に複雑なので直接書く機会は少ないでしょう。svg要素中に書くことができます。