HTML5 オーディオとビデオを上手に使用する方法を教えます

HTML5 は、HTML タグ「audio」および「video」を通じて埋め込みメディアをサポートしているため、開発者は HTML ドキュメントにメディアを簡単に埋め込むことができます。

埋め込みメディア編集

HTML にメディアを埋め込む:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>  你的浏览器不支持 <code>video</code> 标签.</video>

この例は、再生コントローラーを使用して再生可能なビデオを示しています。ビデオは Theora Web サイトから取得されています。

以下は、HTML ドキュメントに音声を埋め込む例です。

<audio src="/test/audio.ogg"><p>你的浏览器不支持audio标签</p></audio>

src属性は、オーディオファイルのURLまたはローカルファイルのパスに設定できます。

<audio src="audio.ogg" controls autoplay loop><p>你的浏览器不支持audio标签</p></audio>

この例のコードは、HTML の「audio」要素のいくつかの属性を使用します:

controls : Web ページ内のオーディオ用の標準 HTML5 コントローラーを表示します。

自動再生 : オーディオを自動的に再生します。

loop : 音声を自動的に繰り返します。

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

preload 属性は、オーディオ要素を含む大きなファイルをバッファリングするために使用されます。設定する属性値は 3 つあります:

「none」はファイルをバッファリングしません

「auto」はオーディオ ファイルをバッファリングします

「メタデータ」 " ファイルのメタデータのみをバッファーします

e02da388656c3265154666b7c71a8ddc タグを使用して複数のファイルを指定し、さまざまなブラウザーでサポートされているエンコード形式を提供できます。例:

<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 ファイルを再生します。ブラウザが Ogg をサポートしていない場合、ブラウザは MPEG-4 ファイルを再生します。さまざまなブラウザーによるビデオおよびオーディオのエンコード形式のサポートを確認するには、audio および video 要素でサポートされているメディア形式のリストを参照してください。

ビデオ ファイルに必要なビデオ コーデックの値を指定することもできます。これにより、ブラウザがより正確な決定を下せるようになります:

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

ここでは、video タグが Dirac および Speex ビデオ コーデックを使用することを指定します。ブラウザが Ogg をサポートしていても、指定されたコーデックをサポートしていない場合、ビデオはロードされません。

type 属性が指定されていない場合、メディア タイプがサーバーに返され、ブラウザがそれを解決できるかどうかがチェックされ、実行できない場合は次のソースがチェックされます。指定されたソース要素がいずれも利用できない場合、エラー イベント が video タグに送出されます。 type 属性が指定されている場合は、ブラウザが再生できるタイプと比較され、認識されない場合はサーバーに問い合わせることもなく、同時に次のソースがチェックされます。

メディア イベントをクリックして、メディア再生イベントの完全なリストを表示します。さまざまなブラウザーでサポートされているメディア形式に関する詳細情報を表示するには、[オーディオ要素とビデオ要素でサポートされているメディア形式] をクリックします。

メディア再生コントロール編集

新しい要素を使用して HTML ドキュメントにメディアを埋め込んだ後、次のことができます。 プログラミングを使用してそれらを制御するには、JavaScriptコードを使用します。たとえば、再生を (再) 開始したい場合は、次のコードを書くことができます:

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

最初の行は、現在のドキュメントの最初のビデオ要素を取得することであり、次の行は、このメソッドは、インターフェースで定義されたメディア要素を実装します。

HTML5 オーディオ プレーヤーの再生、一時停止、音量の増減を制御するのは簡単です:

<audio id="demo" src="audio.mp3"></audio><p>
  <button 
onclick
="document.getElementById(&#39;demo&#39;).play()">播放声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).pause()">暂停声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume+=0.1">提高音量</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume-=0.1">降低音量</button></p>

メディアのダウンロードを停止編集

メディアの再生を停止するのは非常に簡単で、pause() メソッドを呼び出すだけですが、ブラウザは、ガベージ コレクション メカニズムによってメディア要素が収集されるまで、メディアのダウンロードを続けます。

メディアのダウンロードを即座に停止する方法は次のとおりです:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

内部デコードの src 属性を削除する (または単に空の 文字列 - ブラウザによっては設定する) ことでメディア要素を破棄し、メディアのダウンロードを終了できます。 RemoveAttribute() 操作はクリーンではなく、39000f942b2545a5315c57fa3276f220 要素の 'src' 属性を空の文字列に設定すると、不要なリクエストが発生する可能性があります (Mozilla Firefox 22)。

メディア内の編集を検索

メディア要素は、現在の再生位置からメディアのコンテンツ内の特定のポイントへの移動をサポートします。 これは、要素の currentTime プロパティの値を設定することによって実現されます。要素のプロパティの詳細については、「HTMLMediaElement」を参照してください。 再生を継続したい時間を秒単位で設定するだけです。

你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的TimeRanges 时间对象。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
  // 返回开始时间
   (in seconds)mediaElement.seekable.end();
    // 返回结束时间 (in seconds)mediaElement.currentTime = 122;
     // 设定在 122 secondsmediaElement.played.end();
      // 返回浏览器播放的秒数

标记播放范围EDIT

在给一个b97864c2e0ef2353a16c4d64c7734e92或者39000f942b2545a5315c57fa3276f220元素标签指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。

一条指定时间范围的语句：

#t=[starttime][,endtime]

时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。

【相关推荐】

1. html/css免费视频教程

2. 教你如何增强H5中video标签在浏览器中的兼容性

3. 详解HTML5展示视频的标准

4. 简述39000f942b2545a5315c57fa3276f220标签的参数和属性

5. 分析H5网页中video标签中的MP4视频无法播放的缘由

以上がHTML5 オーディオとビデオを上手に使用する方法を教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。