Latest web development tutorials
×

HTML コース

HTML コース HTML 簡単な紹介 HTML エディタ HTML ファウンデーション HTML 要素 HTML プロパティ HTML 見出し HTML 段落 HTML テキストの書式設定 HTML リンク HTML ヘッド HTML CSS HTML 画像 HTML テーブル HTML リスト HTML ブロック HTML レイアウト HTML フォーム HTML フレーム HTML カラー HTML 色名 HTML カラー値 HTML スクリプト HTML 文字エンティティ HTML URL HTML クイックリスト HTML サマリー XHTML入門

HTML5

HTML5 コース HTML5 ブラウザのサポート HTML5 新要素 HTML5 Canvas HTML5 インライン SVG HTML5 MathML HTML5 ドラッグ・アンド・ドロップ HTML5 地理的な位置 HTML5 ビデオ(Video) HTML5 可聴周波数(Audio) HTML5 Input タイプ HTML5 フォーム要素 HTML5 フォームのプロパティ HTML5 セマンティック要素 HTML5 Web メモリ HTML5 Web SQL HTML5 アプリケーションキャッシュ HTML5 Web Workers HTML5 SSE HTML5 WebSocket HTML5 クイズ HTML(5)コードの仕様

HTML メディア

HTML メディア(Media) HTML ウィジェット HTML 可聴周波数(Audio) HTML ビデオプレーヤー(Videos) HTML 例

HTML リファレンスマニュアル

HTML タグリスト(アルファベット順に) HTML タグリスト(ソート機能) HTML プロパティ HTML イベント HTML キャンバス HTML 可聴周波数/ビデオ HTML 効果的な DOCTYPES HTML 色名 HTML カラーピッカー HTML 文字セット HTML ASCII HTML ISO-8859-1 HTML シンボル HTML URL コーディング HTML 言語コード HTTP ニュース HTTP ウェイ キーボードショートカット

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