English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 基礎チュートリアル

HTML5 API

HTML5 メディア

HTML5 グラフィックス

HTML5 Video(ビデオ)

HTML <video> はHTMLに適しています 5+、オンラインで視聴するビデオストリーミングを定義するために使用されます。

HTML5 Video(ビデオ)

多くのサイトではビデオを使用しています。HTML5 ビデオを表示する標準を提供しています。

ブラウザがHTMLをサポートしているかを検出してください。5 ビデオ：

ウェブサイトのビデオ

今まで、ウェブページ上でビデオを表示する標準は存在しませんでした。

今日、ほとんどのビデオはプラグイン（例えばFlash）を使用して表示されています。しかし、すべてのブラウザが同じプラグインを持っているわけではありません。

HTML5 video 要素を通じてビデオを含める標準的な方法を規定しています。

ブラウザのサポート

Internet Explorer 9+Firefox、Opera、Chrome、Safari は <video> 要素をサポートしています。

注意: Internet Explorer 8 またはもっと古いIEバージョンでは <video> 要素がサポートされていません。

HTML5 (ビデオ)- どのように動作するか

HTMLにビデオを表示するには、5 でビデオを表示するには、必要なのは：

オンラインの例

<video　width="320"　height="240"　controls>
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.ogg"　type="video/ogg">
あなたのブラウザはVideoタグをサポートしていません。
</video>
テストをしてみてください ‹/›

<video>要素は再生、一時停止、音量コントロールを提供して、ビデオを制御します。

同時に<video>要素はwidthおよびheight属性を提供して、ビデオのサイズを制御します。高さと幅が設定されている場合、必要なビデオスペースはページの読み込み時に確保されます。これらの属性が設定されていない場合、ブラウザはビデオのサイズを知らず、読み込み時に特定のスペースを確保することができず、ページは元のビデオのサイズに応じて変更されます。

<video>と</video>タグ間に挿入される内容は、video要素をサポートしないブラウザに表示されます。

<video>要素は複数の<source>要素をサポートしています。<source>要素は異なるビデオファイルをリンクすることができます。ブラウザは最初に認識できる形式を使用します：

ビデオ形式とブラウザのサポート

現在、<video>要素はMP形式の3つのビデオ形式をサポートしています。4, WebM、およびOgg:

ブラウザMP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (Operaから) 25 起)YESYES

  • MP4 = H.264 VPビデオエンコードとAACオーディオエンコードを持つMPEG 4 ファイル

  • WebM = VP8 VPビデオエンコードとAACオーディオエンコードを持つWebMファイル

  • Ogg = TheoraビデオエンコードとVorbisオーディオエンコードを持つOggファイル

ビデオ形式

形式MIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

HTML5 <video> - DOMを使用して制御します。

HTML5 　<video>および<audio>要素もまた、方法、属性、イベントを持ちます。

<video>および<audio>要素の方法、属性、イベントはJavaScriptで制御できます。

その方法は再生、一時停止、読み込みなどを行うために使用されます。その属性（例えば、長さ、音量など）は読み取ったり設定することができます。そのDOMイベントは、例えば<video>要素が再生を開始した、一時停止、停止などに通知します。

この例では、<video> タグを使用して属性を読み取り、設定し、メソッドを呼び出す方法を簡単に示しています。

オンラインの例 1

ビデオのためのシンプルな再生を生成する/一時停止およびサイズ調整コントロール：



上記の例では、play() と pause() の二つのメソッドが呼び出され、paused と width の二つの属性が使用されています。

さらに詳しい情報は、以下を参照してください HTML5 Audio/Video DOM リファレンスマニュアル。

HTML5 Video タグ

タグ説明
<video>ビデオを定義する
<source>複数のメディアリソースを定義します、例えば <video> と<audio>
<track>メディアプレイヤーのテキストトラックに定義されています
HTML5 Audio(オーディオ)HTML5 地理的な位置