HTMLで動画を再生する最も簡単な方法は、YouTubeを使用することです。
この記事の概要
ビデオフォーマットと格闘しない為に
ブラウザでの動画表示の方法は、ブラウザの種類によって動画をさまざまな形式に変換する必要があるかもしれないです。
ビデオをさまざまな形式に変換するのは面倒で、かなり時間がかかります。
もっと簡単な解決策は、YouTubeにあなたのWebページのビデオを再生させることです。
YouTube動画ID
動画を保存(または再生)すると、YouTubeはID(tgbNymZ7vqYなど)を表示します。
このIDを使用して、HTMLコードであなたのビデオを参照することができます。
スポンサーリンク
HTMLでYouTubeビデオを再生する
Webページでビデオを再生するには、次の手順を行います。
- YouTubeにビデオをアップロードする
- 動画IDを書き留めます
- Webページに <iframe> 要素を定義します。
- src属性に動画のURLを指定させる
- 幅と高さの属性を使用してプレーヤーの寸法を指定します
- URLに他のパラメータを追加します(下記参照)
例 – iFrameを使用する(推奨)
<iframe width=”420″ height=”315″
src=”https://youtu.be/JSlGR89tx8U”>
</iframe>
YouTube の自動再生
YouTubeのURLに簡単なパラメータを追加することで、ユーザーがそのページにアクセスしたときにビデオの再生を自動的に開始させることができます。
ノート: 動画を自動再生することを決定するときは慎重に検討してください。
自動的にビデオを開始することはあなたの訪問者をいらいらさせ、良い以上に害を及ぼすことになりかねません。無音ならまだいいが、急に音がなるとかは最悪です。
値0(デフォルト):プレーヤーのロード時にビデオは自動的に再生されません。
値1:プレーヤーがロードされるとビデオが自動的に再生されます。
YouTube – 自動再生
<iframe width=”420″ height=”315″
src=”https://youtu.be/JSlGR89tx8U?autoplay=1″>
</iframe>
スポンサーリンク
YouTubeプレイリスト
元のURLに加えて、再生する動画のカンマ区切りリスト。
YouTubeループ
値0(デフォルト):ビデオは一度だけ再生されます
値1:ビデオは(永久に)ループします。
YouTube – ループ
<iframe width=”420″ height=”315″
src=”https://youtu.be/JSlGR89tx8U?playlist=tgbNymZ7vqY&loop=1″>
</iframe>
スポンサーリンク
YouTube コントロール
値 0: プレイヤーのコントロールは表示されません
値 1 (デフォルト): プレイヤーのコントロール表示
YouTube – コントロール
<iframe width=”420″ height=”315″
src=”https://youtu.be/JSlGR89tx8U?controls=0″>
</iframe>
YouTube – <object> または <embed>を使用する
ノート: YouTube <object>
と <embed>
2015年1月から廃止されましたこれからは<iframe>
を代わりに使用するようにしてください.
例 – <オブジェクト>の使用(廃止予定)
<object width=”420″ height=”315″
data=”https://youtu.be/JSlGR89tx8U”>
</object>
例 – <embed>を使用する(非推奨)
<embed width=”420″ height=”315″
src=”https://youtu.be/JSlGR89tx8U”>