HTML ビデオ

HTML でビデオを再生する方法はたくさんあります。

例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

実際に試してみてください

問題、問題、そして解決策

HTML でビデオを再生することは簡単ではありません！

すべてのブラウザ（Internet Explorer、Chrome、Firefox、Safari、Opera）およびすべてのハードウェア（PC、Mac、iPad、iPhone）でビデオファイルを再生できるように、多くの技術を熟知する必要があります。

この章では、CodeW3C.com が問題と解決策をまとめました。

<embed> タグの使用方法

<embed> タグの役割は、HTML ページにマルチメディア要素を埋め込むことです。

以下の HTML コードは、ウェブページに埋め込まれた Flash ビデオを示しています：

例

<embed src="movie.swf" height="200" width="200"/>

実際に試してみてください

問題

  • HTML4 は <embed> タグを認識できません。あなたのページは検証できません。
  • ブラウザが Flash をサポートしない場合、ビデオは再生できません。
  • iPad と iPhone は Flash ビデオを表示できません。
  • ビデオを他の形式に変換しても、すべてのブラウザで再生できない場合があります。

<object> タグの使用方法

<object> タグの役割は、HTML ページにマルチメディア要素を埋め込むことです。

以下の HTML 片断は、ウェブページに埋め込まれた Flash ビデオを示しています：

例

<object data="movie.swf" height="200" width="200"/>

実際に試してみてください

問題

  • ブラウザが Flash をサポートしない場合、ビデオを再生することができません。
  • iPad と iPhone は Flash ビデオを表示できません。
  • ビデオを他の形式に変換しても、すべてのブラウザで再生できない場合があります。

<video> タグの使用方法

<video> は HTML5 での新しいタグです。

<video> タグの役割は、HTMLページにビデオ要素を埋め込むことです。

以下のHTMLスライスは、ウェブページに埋め込まれたogg、mp4、またはwebm形式のビデオを表示します：

例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
あなたのブラウザはビデオタグをサポートしていません。
</video>

実際に試してみてください

問題

  • ビデオを多くの異なる形式に変換する必要があります。
  • <video> 要素は旧式のブラウザでは無効です。
  • <video> 要素はHTML4とXHTMLでバリデーションを通過できません。

最適なHTMLソリューション

HTML5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

実際に試してみてください

上記の例では、4種類の異なるビデオ形式を使用しています。HTML5 <video> 要素は、mp4、ogg、またはwebm形式のいずれかでビデオを再生しようとします。すべて失敗した場合、<embed> 要素に戻ります。

問題

  • ビデオを多くの異なる形式に変換する必要があります。
  • <video> 要素はHTML4とXHTMLでバリデーションを通過できません。
  • <embed> 要素はHTML4とXHTMLでバリデーションを通過できません。

注：<!DOCTYPE html> (HTML5) を使用してバリデーション問題を解決します。

YouTubeソリューション

HTMLでビデオを表示する最も簡単な方法は、YouTubeなどのビデオサイトを使用することです。

ウェブページでビデオを再生したい場合は、ビデオをYouTubeなどのビデオサイトにアップロードし、ウェブページにHTMLコードを挿入してビデオを再生できます：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"> 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

実際に試してみてください

リンクの使用

ウェブページにメディアファイルへのリンクが含まれている場合、ほとんどのブラウザは「サブアプリケーション」を使用してファイルを再生します。

以下のコードスニペットは AVI ファイルへのリンクを示しています。ユーザーがリンクをクリックすると、ブラウザが「サブアプリケーション」、例えば Windows Media Player を起動して AVI ファイルを再生します：

例

<a href="movie.swf">ビデオファイルを再生する</a>

実際に試してみてください

内联ビデオについてのコメント

ビデオがウェブページに含まれると、それが内联ビデオと呼ばれます。

ウェブアプリケーションで内联ビデオを使用する場合、多くの人が内联ビデオをイライラと感じていることに気づく必要があります。

同時に、ユーザーがブラウザ内の内联ビデオオプションをオフにしている可能性がありますので、ご注意ください。

ユーザーが内联ビデオを表示したいと考えている場合にのみ、それらを含めることをお勧めします。一例として、ユーザーがビデオを見る必要があり、リンクをクリックするとページが開き、ビデオが再生される場合があります。

HTML 4.01 多媒体タグ

タグ 説明
<applet> 非推奨。内嵌 applet を定義します。
<embed> 非推奨。内嵌オブジェクトを定義します。（HTML5 で許可されています）
<object> 内嵌オブジェクトを定義します。
<param> オブジェクトのパラメータを定義します。

HTML 5 多媒体タグ

タグ 説明
<video> タグは音楽や他のオーディオストリームなどの音を定義します。
<embed> タグはプラグインなどの埋め込みコンテンツを定義します。