HTML 基本教程

HTML メディア

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

HTML5 基本教程

HTML5 API

HTML5 メディア

HTML 実例全集 HTML オーディオ（Audio）

HTML ビデオ（Video）再生

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

HTMLビデオ（Videos）再生

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本トレーニング(oldtoolbag.com)</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）でビデオファイルが再生できるようにするためには、多くの技術を熟知する必要があります。

この章では、基本的なチュートリアルが問題と解決策をまとめています。

<embed>タグの使用方法

以下のHTMLコードは、ウェブページに埋め込まれたFlashビデオを表示しています：

オンラインサンプル

　　 <embed src="bookmark.swf" height="200" width="200"

問題

HTML4 <embed>タグを認識できません。ページは検証できません。
ブラウザがFlashをサポートしない場合、ビデオは再生できません
iPadやiPhoneはFlashビデオを表示できません。
ビデオを他の形式に変換した場合でも、すべてのブラウザで再生できない場合があります。

<object>タグを使用して

以下のHTMLスライスでは、ウェブページに埋め込まれたFlashビデオを表示します：

例

問題:

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

HTMLを使用して5 <video>要素

HTML5 <video>タグはビデオや映画を定義します。

<video>要素はすべての現代ブラウザでサポートされています。

以下のHTMLスライスでは、ogg、mp形式のビデオをウェブページに埋め込み表示します。4 またはwebm形式のビデオ：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本トレーニング(oldtoolbag.com)</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属性をサポートしていません。
</video>
</body>
</html>

テストをしてみる‹/›

問題:

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

最も良いHTMLの解決策が使用されています

の以下の例では、 4 の異なるビデオ形式で再生を試みます。HTML 5 <video>要素はmp形式の4oggやwebmの形式のいずれかでビデオを再生します。すべて失敗した場合、<embed>要素にバックアップします。

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本トレーニング(oldtoolbag.com)</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でビデオを表示する最も簡単な方法は、YouTubeなどのビデオサイトを使用することです。

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

各ビデオサイトのシェアエントリから、埋め込まれたHTMLコードを見つけることができます。

例

<embed　src='https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf'　allowFullScreen='true'　quality='high'　width='480'　height='400'　align='middle'　allowScriptAccess='always'　type='application/x-shockwave-flash'></embed>

テストをしてみる‹/›

リンクの使用

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

以下のコードスニペットは、AVIファイルへのリンクを示しています。ユーザーがリンクをクリックすると、ブラウザが「サブアプリケーション」、例えばWindows Media Playerを使用してAVIファイルを再生します：

オンラインサンプル

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

内联ビデオの説明

ビデオがウェブページに含まれる場合、内联ビデオと呼ばれます。

ウェブアプリケーションで内联ビデオを使用する場合、多くの人が内联ビデオがイライラすると思っていることに気づく必要があります。

同時に、ユーザーがブラウザ内の内联ビデオオプションをオフにしている可能性がありますので、ご注意ください。

ユーザーが内联ビデオを見たいと考えている場所にのみ含めるのが最善の方法です。一例として、ユーザーがビデオを見る必要があり、リンクをクリックするとページが開き、ビデオが再生される場合があります。

HTMLマルチメディアタグ

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

HTML 実例全集 HTML オーディオ（Audio）