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)を使用して認証問題を解決します。

優酷ソリューション

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

ウェブページでビデオを再生したい場合は、ビデオを優酷などのビデオサイトにアップロードして、ウェブページに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> タグが埋め込まれたコンテンツを定義します、例えばプラグインなど。