HTML YouTube ビデオ

❮ 前章へ 次章へ ❯

HTML でビデオを再生するための最も簡単な方法は、YouTube を使用することです。


ビデオフォーマットで格闘?

いろいろなブラウザの、いろいろなバージョンが、いろいろなビデオフォーマットをサポートしています。

このチュートリアルの初期の頃に、全てのブラウザで再生するためには、ビデオを異なるビデオフォーマットに変換する必要があるかも しれないことを見てきました。

別のフォーマットにビデオを変換することは、難しく、時間がかかることがあります。

簡単な解決策は、あなたのウェブページのビデオを、YouTube に再生させることができるようにすることです。


YouTube ビデオ Id

YouTube は、ビデオを保存(または再生する)際に、(XGSy3_Czz8kのような)id を表示します。

この id を使用して、HTML においてあなたのビデオを参照することができます。


HTML で YouTube ビデオを再生する

Web ページでビデオを再生するには、次のことを実行します:

例 - iFrame の使用 (推奨の方式)

<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

Try it Yourself »

YouTube パラメータ

autohide

値 0: プレーヤ・コントロールを常に表示されます。

値 1: ビデオの再生時に、プレーヤ・コントロールは自動的に非表示になります。

値 2 (デフォルト): プレーヤの比率が 16:9 か 4:3 の場合は、1 に同じ、それ以外は 0 に同じ。

autoplay

値 0 (デフォルト): プレーヤが読み込まれても、ビデオは自動的に再生されません。

値 1: プレーヤが読み込まれると、ビデオは自動的に再生されます。

controls

値 0: プレーヤ・コントロールは表示しません。ビデオは直ちに読み込まれます。

値 1 (デフォルト): プレーヤ・コントロールを表示します。ビデオは直ちに読み込まれます。

値 2: プレーヤ・コントロールを表示しますが、ユーザが再生を開始する前に、ビデオはロードされません。

loop

値 0 (デフォルト): ビデオを一度だけ再生します。

値 1: ビデオを繰り返し(永久に)再生します。

playlist

(元のURLに加えて) 再生するビデオのカンマ区切りリスト。


YouTube <object> 埋込み

YouTube <object> 埋込みは、2015年1月から非推奨になりました。

<iframe> 埋込みを使用するよう、アプリケーションを移行する必要があります。

 <object> の使用 (非推奨)

<object width="420" height="315"
data="http://www.youtube.com/embed/XGSy3_Czz8k">
</object>

Try it Yourself »

 <embed> の使用 (非推奨)<

<embed width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k">

Try it Yourself »


❮ 前章へ 次章へ ❯