HTML ビデオ (ビデオ)

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

HTMLビデオ（ビデオ）の再生

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

</body>
</html>

インスタンスを実行する»

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

問題と解決策

HTMLでビデオを再生するそして簡単ではありません！

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

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

<embed> タグを使用します

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

HTML4 は <embed> タグを識別できません。ページは検証に合格できません。

ブラウザがFlashをサポートしていない場合、ビデオは再生されません

iPadおよびiPhoneではFlashビデオを表示できません。

ビデオを他の形式に変換しても、すべてのブラウザで再生できるわけではありません。

<object>タグを使用します
<object>タグは、HTMLページにマルチメディア要素を埋め込むために使用されます。
次の HTML スニペットは、Web ページに埋め込まれた Flash ビデオを示しています:
インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h2>Playing the Object</h2>

<embed src="intro.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

質問:

ブラウザがFlashをサポートしていない場合、ビデオを再生できません。

iPadおよびiPhoneではFlashビデオを表示できません。

ビデオを他の形式に変換しても、すべてのブラウザで再生できるわけではありません。

HTML5 <video> 要素の使用

次の HTML スニペットは、Web ページに埋め込まれた ogg、mp4、または webm 形式のビデオを表示します:

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

</body>
</html>

インスタンスの実行 »

問題:

ビデオをさまざまな形式に変換する必要があります。
<video> 要素は古いブラウザでは無効です。

最高の HTML ソリューション

次の例では 4 つの異なるビデオ形式が使用されています。 HTML 5 の <video> 要素は、mp4、ogg、または webm 形式のいずれかでビデオを再生しようとします。どちらも失敗した場合は、<embed> 要素に戻ります。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频。
</video>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

問題:

ビデオをさまざまな形式に変換する必要があります

Youku ソリューション

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

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

ハイパーリンクの使用

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

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

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

</body>
</html>

インスタンスの実行»

「インスタンスの実行」をクリックします。オンラインインスタンスを表示するボタン

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

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

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

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

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

HTML マルチメディアタグ

新しい : HTML5 の新しいタグ

タグ	説明
<embed>	埋め込みオブジェクトを定義します。 HTML4 では非推奨ですが、HTML5 では許可されています。
<object>	埋め込みオブジェクトを定義します。
<param>	オブジェクトのパラメータを定義します。
<audio>	はサウンドコンテンツを定義します
<video>	はビデオまたはビデオを定義します
<ソース>	メディア要素 (<video> および <audio>) のマルチメディアリソースを定義します。
<track>	メディア要素 (<video> および <) のテキストを含む字幕ファイルまたはその他のファイルを指定します。音声>)

HTML ビデオ (ビデオ)