HTML5 チュートリアル - ビデオ

皆さん、こんにちは。HTML5 は、過去 10 年間で Web フロントエンド開発において大きな進歩を遂げました。以前のバージョンとは異なり、HTML 5 は Web コンテンツを表すためだけに使用されるのではなく、HTML 5 プラットフォーム上で Web を成熟したアプリケーション プラットフォームに組み込むこと、およびコンピューターベースのインタラクションを標準化することです。 。

次に、HTML5 チュートリアルビデオを紹介します。

多くの流行の Web サイトで動画が提供されています。 HTML5 はビデオを表示するための標準を提供します。

Web 上のビデオ

これまで、Web ページ上にビデオを表示するための標準はありませんでした。

現在、ほとんどのビデオはプラグイン (Flash など) を介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。

HTML5 は、video 要素を介してビデオを含める標準的な方法を指定します。

ビデオ形式

現在、video 要素は 3 つのビデオ形式をサポートしています:

Ogg: Theora ビデオ エンコーディングと Vorbis オーディオ エンコーディングを備えた Ogg ファイル

MPEG4: H.264 ビデオ エンコーディングと AAC オーディオ エンコードされた MPEG 4ファイル;

WebM: VP8 ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した WebM ファイル。

仕組み

HTML5 でビデオを表示するために必要なのは、再生、一時停止、音量コントロールを追加する

<video src=”movie.ogg” controls=”controls”>
</video>

control 属性だけです。

幅と高さの属性を含めることも良い考えです。

の間に挿入されたコンテンツは、video 要素をサポートしていないブラウザで表示するためのものです:

例:

<video src=”movie.ogg” width=”320″ height=”240″ controls=”controls”>
Your browser does not support the video tag.
</video>

上記の例は、Ogg ファイルを使用しており、Firefox、Opera に適しています。そしてChromeブラウザ。

Safari ブラウザで確実に動作するには、ビデオ ファイルのタイプが MPEG4 である必要があります。

video 要素では複数のソース要素を使用できます。ソース要素は、異なるビデオ ファイルをリンクできます。ブラウザーは最初に認識された形式を使用します:

例:

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.ogg” type=”video/ogg”>
<source src=”movie.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>

Internet Explorer

Internet Explorer 8 は video 要素をサポートしません。 IE 9 では、MPEG4 を使用したビデオ要素がサポートされる予定です。

上記は HTML5 チュートリアルのビデオの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。