HTMLビデオ(動画)を再生します2024 年の最新の入門チュートリアル。このコースでは HTMLビデオ(動画)を再生します,例,問題点とその解決法,<embed>タグを使用して、,例,<object>タグを使用して、,例,HTML5の<video>要素を使用して、,例,ベストHTMLソリューション,HTML 5 + <オブジェクト> + <EMBED>,Youkuのソリューション,ハイパーリンクを使用して,例,インラインビデオ記述について,HTMLマルチメディアタグ, について学習できます。

HTMLビデオ(動画)を再生します

HTMLの方法でビデオを再生するには、多くの方法があります。


HTMLビデオ(動画)を再生します

<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の、オペラ)内のファイル、およびすべてのハードウェア(PC、マック、アプリ、iPhone)を再生できることを保証するために、おなじみのヒントの多くを必要とします。

この章では、W3CSchoolあなたは、問題と解決策をまとめます。


<embed>タグを使用して、

役割<embed>タグは、HTMLページ内のマルチメディア要素を埋め込むことです。

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

<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は、<動画>タグには、動画や映画を定義します。

すべての最新ブラウザで<ビデオ>要素がサポートされています。

次のHTML断片は、Webページに埋め込まOGG、MP4、またはWEBM形式のビデオを表示します。

<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>

»をお試しください

問題:

  • あなたは多くの異なるフォーマットにビデオを変換する必要があります。
  • <ビデオ>要素は、古いブラウザでは有効ではありません。

ベストHTMLソリューション

次の例では、4つの異なるビデオ形式を使用しています。 HTML 5の<video>要素は、MP4、OGG、またはWEBM形式を再生しようとするビデオを再生することです。 すべてが失敗した場合は、再び<EMBED>要素に分類されます。

HTML 5 + <オブジェクト> + <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>

»をお試しください

問題:

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

Youkuのソリューション

HTMLで動画を表示する最も簡単な方法は、Youkuのや他の動画サイトを使用することです。

あなたがウェブページにビデオを再生したい場合は、Youkuのや他の動画サイトに動画をアップロードしてから、あなたのページでビデオを再生するには、HTMLコードを挿入することができます。

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>

ハイパーリンクを使用して

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

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

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

»をお試しください


インラインビデオ記述について

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

あなたは、Webアプリケーション内にインラインでビデオを使用する場合は、多くの人が迷惑なインラインビデオを見つけることを認識する必要があります。

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

私たちの最高のアドバイスは、ユーザーが場所のインラインビデオは、それらが含まれている見たいときのみになります。 肯定的な例では、ユーザーがビデオを見て、リンクをクリックする必要があるときに、ページを開いて、ビデオを再生することです。


HTMLマルチメディアタグ

新:HTML5の新しいタグ。

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)
HTMLビデオ(動画)を再生します
10/30