HTMLビデオ

HTMLオーディオ HTML YouTube ビデオ

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) で確実に再生するには、習得する必要があるコツがいくつかあります。

この章では、W3School が問題と解決策をまとめています。

<embed> タグの使用

<embed> タグは、HTML ページにマルチメディア要素を埋め込むために使用されます。

次の HTML コードは、Web ページに埋め込まれた Flash ビデオを表示します。

例

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

自分で試してみてください

質問

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

<object> タグの使用

<object> タグは、HTML ページにマルチメディア要素を埋め込むために使用されます。

次の HTML スニペットは、Web ページに埋め込まれた Flash ビデオを示しています。

例

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

自分で試してみてください

質問

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

<video> タグの使用

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

<video> タグは、HTML ページにビデオ要素を埋め込むために使用されます。

次の HTML スニペットは、Web ページに埋め込まれたビデオを 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" />
Your browser does not support the video tag.
</video>

自分で試してみてください

質問

  • ビデオをさまざまな形式に変換する必要があります。
  • <video> 要素は、古いブラウザでは効果がありません。
  • <video> 要素は、HTML 4 および XHTML の検証に失敗します。

最良の HTML ソリューション

HTML 5 + <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 つの異なるビデオ形式が使用されています。 HTML 5 の <video> 要素は、mp4、ogg、または webm 形式のいずれかでビデオの再生を試みます。 他のすべてが失敗した場合は、<embed> 要素に戻ります。

質問

  • ビデオをさまざまな形式に変換する必要がある
  • <video> 要素は、HTML 4 および XHTML の検証に失敗します。
  • <embed> 要素は、HTML 4 および XHTML の検証に失敗します。

注: 検証の問題を解決するには、<DOCTYPE html> (HTML5) を使用してください。

ハイパーリンクの使用

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

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

例

<a href="movie.swf">Play a video file</a>

自分で試してみてください

インラインビデオに関する注意

Web ページにビデオが含まれている場合、それはインライン ビデオと呼ばれます。

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

ユーザーがブラウザでインライン ビデオ オプションをオフにしている可能性があることにも注意してください。

私たちの最善のアドバイスは、ユーザーが視聴することを期待している場所にのみインラインビデオを含めることです。 良い例としては、ユーザーがビデオを見る必要があり、リンクをクリックするとページが開き、ビデオが再生される場合が挙げられます。

HTML 4.01 マルチメディア タグ

ラベル 説明
<applet> は不承認です。 埋め込みアプレットを定義します。
<embed> は不承認です。 は埋め込みオブジェクトを定義します。 (HTML5 で許可されています)
<object> は埋め込みオブジェクトを定義します。
<param> はオブジェクトのパラメータを定義します。

HTML 5 マルチメディア タグ

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