最新のWeb開発のチュートリアル

HTML5ビデオ


HTMLビデオの例。 礼儀ビッグバックバニー

»それを自分で試してみてください

HTML5のビデオとは何ですか?

HTML5の仕様は、一部のオブジェクト要素を置き換える、ビデオ再生のためにビデオ要素を導入しました。

早期適用がどのビデオ符号化フォーマットなどの合意の欠如によって妨げられたがHTML5ビデオは、代わりに独自のAdobe Flashプラグインを使用して、以前のデファクトスタンダードで、ウェブ上の動画を表示するための新しい標準的な方法になるために、そのクリエイターにより意図されますそして、オーディオ符号化形式は、Webブラウザでサポートされなければなりません。


HTMLでビデオを再生します

HTML5の前に、ウェブページ上で動画を表示するための標準はありませんでした。

HTML5の前に、ビデオは、唯一のプラグインを使用してプレイすることができ(like flash)

HTML5 <video>要素は、Webページに動画を埋め込むための標準的な方法を指定します。


ブラウザのサポート

表中の数字は完全にサポートする最初のブラウザのバージョンを指定<video>要素を。

素子
<video> 4.0 9.0 3.5 4.0 10.5

HTML <video>要素

HTMLでビデオを表示するには、使用<video>要素を:

<video width="320" height="240" controls>
  <source src="/html/movie.mp4" type="video/mp4">
  <source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
»それを自分で試してみてください

使い方

controls属性再生、一時停止、音量のように、ビデオコントロールを追加します。

常に含めることをお勧めしwidthheightの属性。

高さと幅が設定されていない場合は、ブラウザは、ビデオのサイズを知りません。 効果は、ページが変更されることになります(or flicker)ビデオ負荷ながら。

間のテキスト<video></video>タグがのみサポートしていないブラウザで表示されます<video>要素を。

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


HTML <video>自動再生

ビデオは自動的に使用開始するにはautoplay属性を:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
»それを自分で試してみてください

autoplay属性は、iPadやiPhoneなどのモバイル機器では動作しません。


HTMLビデオ - ブラウザのサポート

現在、3つのサポートされているビデオフォーマットはそこにある<video>要素:MP4、WebMの、およびOgg:

ブラウザ MP4WebMOgg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

HTMLビデオ - メディアタイプ

ファイル形式 メディアタイプ
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTMLビデオ - メソッド、プロパティ、およびイベント

HTML5はDOMメソッド、プロパティ、およびイベントのための定義<video>要素を。

これは、あなたが時間と音量を設定するだけでなく、ロード、再生し、動画を一時停止することができます。

動画の再生が始まるときに通知することができますDOMイベントもあり、などを一時停止しています

例:JavaScriptを使用して




ビデオ礼儀ビッグバックバニー

»それを自分で試してみてください

完全なDOMの参考のために、私たちに行くHTML5オーディオ/ビデオDOMリファレンス


HTML5のビデオタグ

タグ 説明
<video> ビデオや映画を定義します
<source> などのメディア要素のための複数のメディアリソースを定義します<video><audio>
<track> メディアプレーヤーでテキストトラックを定義します