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でバリデーションできません。

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

优酷ソリューション

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>

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

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

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

Webアプリケーションで内線ビデオを使用する場合、多くの人が内線ビデオがイライラすると認識していることを意識する必要があります。

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

ユーザーが内線ビデオを見たいと考えている場合にのみ、それらを含めるのが最善の方法です。良い例として、ユーザーがビデオを見てリンクをクリックすると、ページが開きビデオが再生される場合があります。

HTML 4.01 多媒体タグ

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

HTML 5 多媒体タグ

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