• 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

HTML ビデオ例 YouTube



HTMLで動画を再生する

HTML 5より前では、ビデオはプラグインのあるブラウザでのみ再生できていました(フラッシュのように)

HTML5 <video>要素は、Webページにビデオを埋め込むための標準的な方法を指定します。


ブラウザのサポート

表中の数字は、<video> 要素を完全にサポートする最初のブラウザバージョンを示しています。

要素 Chrome Internet Explorer / Edge Firefox Safari Opera
<video> 4.0 9.0 3.5 4.0 10.5

スポンサーリンク

HTMLの <video> 要素

ビデオをHTMLで表示するには、次の <video> 要素を使用します。

例文

<video width=”320″ height=”240″ controls>
  <source src=”movie.mp4″ type=”video/mp4″>
  <source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

使い方

この controls 属性は、再生、一時停止、音量などのビデオコントロールを追加します。

常に含めることをお勧めします widthheight 属性。高さと幅が設定されていないと、ビデオの読み込み中にページがちらつくことがあります。

この <source> 要素により、ブラウザが選択できる代替ビデオファイルを指定できます。ブラウザは最初に認識されたフォーマットを使用します。

タグ <video></video> タグの間のテキストは
<video> 要素をサポートしていないブラウザにのみ表示されます。


スポンサーリンク

HTML <video> 自動再生

動画を自動的に開始するには、次の autoplay 属性を使用します

例文

<video width=”320″ height=”240″ autoplay>
  <source src=”movie.mp4″ type=”video/mp4″>
  <source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

autoplay属性は、iPadやiPhoneなどのモバイルデバイスでは機能しません。


HTMLビデオ – ブラウザのサポート

HTML5では、3つのサポートされているビデオフォーマットがあります:MP4、WebM、そしてOgg。

さまざまなフォーマットに対するブラウザのサポートは次のとおりです。

ブラウザ MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

スポンサーリンク

HTMLビデオ – メディアタイプ

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 Video タグ

Tag 説明
<video> ビデオまたは映画を定義します
<source> <video> と <audio>などのメディア要素の複数のメディアリソースを定義します
<track> メディアプレーヤーのテキストトラックを定義します

コメントを残す