HTML5 の動画再生タグ video と音声再生タグ audio の正しい使い方

動画・音声の埋め込み方法

HTML5オーディオプレーヤーとビデオプレーヤーをウェブページに埋め込むのは、次のように簡単です。

<video src="//www.jb51.net/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
 Your browser does not support the <code>video</code> element.
</video>

上の例では、ビデオファイルを再生し、ビデオ再生コントロールボタンを公開する方法を示しています。

次の例は、HTMLページにオーディオ音声を埋め込む方法です。

<audio controls autoplay loop src="/test/audio.ogg">
<p>Your browser does not support the <code>audio</code> element.</p>
</audio>

ここのsrc属性には、オーディオ/ビデオのURLを入力するか、ローカルファイルを指定します。

<audio src="audio.ogg" controls autoplay loop>
<p>Your browser does not support the <code>audio</code> element </p>
</audio>

以下は、<audio> と <video> のタグにある control 属性の意味です。

controls : HTML5 標準の動画/音声プレーヤーのコントロールバー、コントロールボタンを表示します。
autoplay : ファイルを自動再生させます。
loop : ファイルをループさせる。

<audio src="audio.mp3" preload="auto" controls></audio>

ここでのpreload属性は、大きなファイルをキャッシュするために使用されます。3つのオプション値があります。

キャッシュしません。
自動キャッシュ
ファイルのメタ情報のみをキャッシュします。
異なるメディアタイプをサポートする様々なブラウザに対応するために、複数の <source> 要素を使用して、複数の異なるメディアタイプを提供することができます。例えば

<video controls>
 <source src="foo.ogg" type="video/ogg">
 <source src="foo.mp4" type="video/mp4">
 Your browser does not support the <code>video</code> element.
</video>

Ogg形式のビデオストリーミングに対応したブラウザは、Oggファイルを再生することができます。対応していない場合は、MPEG-4ファイルを再生することができます。各ブラウザのメディアタイプへの対応状況は、こちらをご覧ください。

また、再生に使用するコーデックを指定することもできます。これにより、ブラウザは提供された動画をどのように再生するか、より正確に判断することができます:。

<video controls>
 <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
 Your browser does not support the <code>video</code> element.
</video>

上記で、このビデオは Dirac と Speex のデコーダを使用する必要があることを指定しました。ブラウザが Ogg フォーマットをサポートしていても、指定されたデコーダがない場合は、動画は読み込まれません。

type 属性が提供されない場合、ブラウザはサーバーにメディアタイプを問い合わせて、それがサポートされているかどうかを確認します。サポートされていない場合、ブラウザは次の source 属性に進んで確認します。

JavaScriptで動画・音声の再生を制御する

動画ファイルがHTMLページに正しく埋め込まれたら、それを制御するJavaScriptの部分を使って、その再生に関する情報を取得することができます。たとえば、JavaScriptで動画の再生を開始するには、次のようにします。

var v = document.getElementsByTagName("video")[0];
v.play();

HTML5動画プレーヤーをJavaScriptで制御し、再生、一時停止、早送り、早巻き、ボリュームなどを操作することができます。

<audio id="demo" src="audio.mp3"></audio>
<div>
 <button onclick="document.getElementById('demo').play()">play</button>
 <button onclick="document.getElementById('demo').pause()">pause</button>
 <button onclick="document.getElementById('demo').volume+=0.1">lower volume</button>
 <button onclick="document.getElementById('demo').volume-=0.1">Raise volume</button>
</div> 

動画ファイルのダウンロードを停止する

pause() メソッドを使用して動画ファイルを停止することはできますが、ブラウザは一定のキャッシュサイズに達しない限りメディアファイルのダウンロードを停止しません。

ここでは、ブラウザで動画ファイルのダウンロードを停止させる方法を説明します。 [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]