近年、ウェブサイトのページにオーディオおよびビデオリソースを配置することがますます一般的になり、 YouTube 、Viddler、 Revver 、 MySpaceなどのプロジェクトにより、これらの要素をユーザーがよりアクセスしやすくすることが可能になりました。 ただし、現在HTML形式にはオーディオとビデオを埋め込むための幅広い機能がないため、開発者はFlashを使用してこれを実装しようとしています。 QuickTime、Windows Mediaなど、さまざまなプラグインの実装を使用できますが、 ただし、Flashの実装は現在、最も一般的な方法であり、さまざまなブラウザーとの互換性が最も高い方法です。
フラッシュプレーヤーを作成するプロセスの開発者は、基本的に「再生」、「一時停止」、「停止」、ボリュームコントロールなどの基本機能を持つ独自のユーザーインターフェイスを作成することに主に関心があることに注意してください。 アイデアは、これらの機能をブラウザーに表示し、ビデオとオーディオの埋め込みのサポートを追加し、DOM APIを使用して再生を制御することです。
新しい要素「 ビデオ 」と「 オーディオ 」により、この問題を簡単に解決できます。 ほとんどのAPIはこれらの2つの要素間に分散されますが、唯一の違いは視覚と非視覚のメディアリソースの違いです。
OperaとWebKitの開発者は、「 video 」要素を部分的にサポートする製品を作成しました。 これらの実験製品は、 OperaおよびWebKitからダウンロードしてテストできます。 OperaはOgg Theora形式をサポートし、WebKitはサードパーティのパブリッシャーが開発したものも含め、すべてのQuickTime形式をサポートしています。
ビデオ要素をサイトに接続する最も簡単な方法は、「 ビデオ 」タグを使用することと、ブラウザがデフォルトのユーザーインターフェイスを使用できるようにすることです。 ブールプロパティ " controls "を使用すると、デフォルトのユーザーインターフェイスを使用するかどうかを決定できます。
<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
Download movie
オプションの属性「 ポスター 」を使用すると、ビデオの再生を開始する前に表示される画像を設定できます。 このような画像をデフォルトで設定する多くの形式（MPEG-4など）がありますが、このソリューションは任意の形式のサポートを提供する代替手段です。
「 audio 」タグを使用して、オーディオ要素をページに接続することも非常に簡単です。 「 audio 」要素と「 video 」要素のプロパティのほとんどは同じですが、明らかな理由により、オーディオ要素にはデフォルトの幅、高さ、または画像プロパティがありません。
Download song
HTML 5には、「 source 」の要素も含まれています。これにより、ブラウザがサポートする形式に基づいて選択できる代替のビデオおよびオーディオファイルへのパスを決定できます。 メディアプロパティを使用して、再生デバイスの制限された機能に基づいてリソースのソースを示し、リソースのタイプとコーデックのタイプを示すことができます。 ソース要素を使用する場合、 src属性は親のオーディオおよびビデオ要素から除外する必要があります。そうしないと、これらの代替パスは無視されます。
<source src = "music.mp3" type = "audio / mpeg">
</ audio> </ code> </ blockquote>
ユーザーインターフェイスをより細かく制御してWebページの全体的なデザインに合わせたい開発者向けに、API拡張機能を使用すると、スクリプトでメディアの再生を制御できるいくつかのメソッドとイベントを使用できます。 最も簡単な方法は、<strong> play（）</ strong>、<strong> pause（）</ strong>、および<strong> currentTime </ strong>を先頭に戻す設定です。
<blockquote> <code>
<video src = "video.ogg" id = "video"> </ video>
<スクリプト>
var video = document.getElementById（ "video"）;
</ script>
<p> <button type = "button" onclick = "video.play（）;">再生</ button>
<button type = "button" onclick = "video.pause（）;">一時停止</ button>
<button type = "button" onclick = "video.currentTime = 0;">
<<巻き戻し</ button>
</ code> </ blockquote>
この記事では扱っていない他の多くのビデオおよびオーディオ要素とAPI拡張もあります。 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video">これについては、現在のHTML 5仕様で読むことができます</ a>
</ habracut>