第 9 章 オーディオとビデオ_html/css_WEB-ITnose

学習ポイント:

1. オーディオとビデオの概要

2. ビデオビデオ要素

3. オーディオオーディオ要素

講師: Li Yanhui

この章の要点 オーディオとHTML5 要素のビデオ、これら 2 つのネイティブ メディア要素を通じて HTML ページにオーディオとビデオを埋め込みます。

1.オーディオとビデオの概要

まず、コンテナとコーデックという 2 つの概念を理解する必要があります。

1.

ビデオコンテナ オーディオファイルまたはビデオファイルは単なるコンテナファイルです。ビデオ ファイルには、オーディオ トラック、ビデオ トラック、その他のメタデータが含まれています。ビデオが再生されると、オーディオ トラックとビデオ トラックが結合されます。メタデータには、ビデオのカバー、タイトル、サブタイトル、サブタイトル、およびその他の関連情報が含まれます。主流のビデオ コンテナでサポートされている形式は、.avi、.flv、.mp4、.mkv、.ogg、および .webm です。

2

.

CODEC オーディオとビデオのエンコード/デコードは、オーディオまたはビデオを再生できるように、オーディオまたはビデオの特定の部分をデコードおよびエンコードするために使用される一連のアルゴリズムです。元のメディア ファイルのサイズは非常に大きく、エンコードされていない場合、データ量は膨大になり、デコードされないとインターネット上に拡散するのに耐えられない時間がかかります。オリジナルのメディアデータに再編成されます。メインストリームのオーディオ コーデック: AAC、MPEG-3、Ogg Voribs、ビデオ コーデック: H.264、VP8、Ogg Theora。

3.

ブラウザのサポート 元々、HTML5 仕様はコーデックを規定することを目的としていましたが、実装は非常に困難でした。一部のメーカーはすでに独自の規格を持っており、それを実装することに消極的ですが、一部のコーデックは特許で保護されており、高額な支払いが必要です。統一仕様の要件は最終的に放棄され、その結果、個々のブラウザが独自の標準を実装することになりました。

コンテナ形式ビデオコーデックオーディオコーデックIE9+Firefox5+Chrome13+WebMVP8ヴォルビス×√√OGGテオラヴォルビス×√√MPEG-4H.264AAC√×質問がありますか？

上記の 3 つのブラウザに加えて、Safari5+ は MPEG-4 をサポートし、Opera11 は WebM と OGG をサポートします。このデータ セットがあれば、MP4 と OGG 形式を準備するだけで済みますが、新しい高解像度規格 WebM の場合は、もちろんそれは非常に必要です。なぜなら、WebM は高解像度であるだけでなく、ソース コードと特許権を無制限に使用できる無料のライセンスだからです。

現在、WebM 形式のビデオを宣伝するために Chrome ブラウザーを使用しています。 H.264 でエンコードされたビデオは将来的に廃止されると言われているため、将来のバージョンでは MP4 ビデオが再生できなくなる可能性があります。もちろん、現在のデモ版も引き続きサポートされます。

Ⅱ。 video Video 要素

以前は、ビデオの再生には Flash プラグインを使用する必要がありました。ただし、Flash プラグインの不安定性によりブラウザがクラッシュすることがよくあったため、多くのブラウザやシステム メーカーが Flash プラグインを放棄し始めました。それを置き換えたのが、HTML5 の video 要素です。

属性名	手順
src	ビデオリソース URL
幅	ビデオ幅
高さ	ビデオ高さ
自動再生	設定後、すぐにビデオの再生が開始されることを意味します
preload	設定すると、ビデオのプリロードを意味します
コントロール	設定後、再生コントロールを表示することを意味します
ループ	設定後、ビデオを繰り返し再生
ミュート	設定後、ビデオがミュート状態であることを意味します
ポスター	ビデオデータを再生するときに表示される画像を指定しますロード済み

1 . WebM を埋め込む video

<video src="test.webm" width="800" height="600"></video>

説明:

URL を表し、width は幅を表します。

2. いくつかの属性を追加します

<video src="test.webm" width="800" height="600" autoplay controls loop muted></video>

説明: autoplay は再生コントロールを自動的に開始することを意味し、muted はループ再生を意味します。

3.

プリロード設定

<video src="http://li.cc/test.webm" width="800" height="600" controlspreload="none"></video>

説明: preload 属性には 3 つの値があります。 none は、プレーヤーが何もロードしないことを意味し、メタデータ (幅、高さ、最初) のみをロードできることを意味します。フレームやその他の情報を再生する前にロードされます); auto は、ブラウザーにビデオ全体をできるだけ早くダウンロードするよう要求することを意味します。

4.

プレビュー画像を使用する

<video src="http://li.cc/test.webm" width="800" height="600" controls poster="img.png"></video>

説明: ポスター属性は、ビデオの最初のフレームでプレビュー画像を作成することを示します。

5.

複数のブラウザとの互換性

<video width="800" height="600" controls poster="img.png">    <source src="test.webm">    <source src="test.mp4">    <source src="test.ogg">    <object>这里引入 flash 播放器实现 IE9 以下，但没必要了</object></video>

説明: より多くのブラウザとの互換性を維持するために、 要素を通じて複数の形式のビデオを導入します。

Ⅱ。

audio Audio 要素 video 要素と同様に、audio 要素はオーディオ コンテンツを埋め込むために使用され、audio 要素のプロパティは video 要素のプロパティと似ています。オーディオのサポートはビデオと似ており、互換性のために複数の形式を導入するには 要素を使用するだけです。主流のオーディオ形式は、.mp3、.m4a、.ogg、.wav です。

srcビデオリソースのURLautoplay設定後は、ビデオはすぐに再生を開始しますプリロード設定すると、ビデオをプリロードすることを意味しますコントロール設定後、再生コントロールを表示することを意味します

 

1.嵌入一个音频

<audio src="test.mp3" controls autoplay></audio>

解释：和嵌入视频一个道理。

 

2.兼容多个浏览器

<audio controls>    <source src="test.mp3">    <source src="test.m4a">    <source src="test.wav"></audio>

解释：略。

PS：更多设计到 API 的 JavaScript 控制，将在以后的基于 JavaScript 基础后讲解。

属性名	説明