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 属性は、再生、一時停止、音量などのビデオコントロールを追加します。
常に含めることをお勧めします width と height 属性。高さと幅が設定されていないと、ビデオの読み込み中にページがちらつくことがあります。
この <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> | メディアプレーヤーのテキストトラックを定義します |