HTMLビデオ（ビデオ）

HTML ビデオ（Video）

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

HTML ビデオ（Videos）再生

HTML でビデオを再生する最も一般的な方法は、<video> タグを利用することです。このタグを使用することで、異なるビデオ形式をサポートし、ユーザーに再生コントロールを提供することができます。

<video width="320" height="240" 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）上でビデオファイルを再生するには、多くの技術を習得する必要があります。

この章では、一般的な問題とその解決方法を紹介します。

<embed> タグの使用

<embed> タグは HTML ページにマルチメディア要素を埋め込むためのものです。以下の HTML コードは、ウェブページに埋め込まれた Flash ビデオを表示します:

<embed src="intro.swf" height="200" width="200">

問題

  • HTML4 では <embed> タグは認知されていない。ページが検証に通らない。
  • ブラウザが Flash をサポートしていない場合、ビデオは再生されない。
  • iPad や iPhone は Flash ビデオを表示できない。
  • ビデオを他の形式に変換しても、すべてのブラウザで再生できるわけではない。

<object> タグの使用

<object> タグは HTML ページにマルチメディア要素を埋め込むためのものです。以下の HTML フラグメントは、ウェブページに埋め込まれた Flash ビデオを表示します:

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

問題

  • ブラウザが Flash をサポートしていない場合、ビデオは再生されない。
  • iPad や iPhone は Flash ビデオを表示できない。
  • ビデオを他の形式に変換しても、すべてのブラウザで再生できるわけではない。

HTML5 <video> 要素の使用

HTML5 の <video> タグはビデオや映画を定義します。<video> 要素はすべてのモダンブラウザでサポートされています。

<video width="320" height="240" 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> 要素は古いブラウザでは無効です。

最適なHTMLソリューション

以下の例では、4つの異なるビデオ形式を使用しています。HTML5 <video> 要素が mp4、ogg、または webm の形式のいずれかを再生しようと試みます。どれも失敗した場合、<embed> 要素にフォールバックします。

<video width="320" height="240" 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>

問題

  • ビデオを多くの異なる形式に変換する必要があります。

ハイパーリンクの使用

ウェブページにメディアファイルへのハイパーリンクが含まれている場合、ほとんどのブラウザは "補助アプリケーション" を使用してファイルを再生します。以下のコードフラグメントは AVI ファイルへのリンクを表示します。ユーザーがこのリンクをクリックすると、ブラウザは Windows Media Player などの "補助アプリケーション" を起動してこの AVI ファイルを再生します:

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

インラインビデオに関する説明

ビデオがウェブページに含まれている場合、そのビデオはインラインビデオと呼ばれます。インラインビデオをウェブアプリケーションで使用するつもりの場合、多くの人がインラインビデオを煩わしいと感じていることを知っておく必要があります。また、ユーザーがブラウザでインラインビデオのオプションを無効にしている可能性もあります。

我々の最善のアドバイスは、ユーザーがインラインビデオを見たいと思う場所にのみそれらを含むことです。良い例としては、ユーザーが見たいビデオがリンクをクリックして新しいページで再生されるようにすることです。

HTML マルチメディアタグ

以下は HTML5 で新たに追加されたマルチメディア関連のタグです:

タグ 説明
<embed> 内嵌オブジェクトを定義します。HTML4 では非推奨、HTML5 では許可されています。
<object> 内嵌オブジェクトを定義します。
<param> オブジェクトのパラメータを定義します。
<audio>New 音声コンテンツを定義します。
<video>New ビデオまたは映画を定義します。
<source>New メディア要素（<video> および <audio>）のメディアリソースを定義します。
<track>New メディア要素の字幕ファイルまたは他のテキストファイルを規定します（<video> および <audio>）。

QA

Q: HTML5 <video> タグの利点は何ですか？

A: HTML5 <video> タグの利点は、クロスブラウザ互換性が高く、再生コントロールを提供し、ユーザーが複数のビデオ形式を提供できることです。

Q: <embed> タグの問題点は何ですか？

A: <embed> タグの主な問題点は、HTML4 では認知されていないことや、Flash をサポートしないブラウザではビデオが再生されないことです。

Q: 古いブラウザで <video> タグをサポートするにはどうすればいいですか？

A: 古いブラウザで <video> タグをサポートするためには、<object> や <embed> タグをフォールバックとして使用することが有効です。