HTML Videoタグの使い方
videoタグの定義と使用説明
HTMLのvideoタグは、ウェブページにビデオを埋め込むために使用されます。このタグは、さまざまなフォーマットのビデオファイルをサポートし、ユーザーがビデオを視聴するためのコントロールを提供します。基本的な例は以下のコードをご覧ください。
<video src="movie.mp4" controls></video>ブラウザのサポート程度
HTML5のvideoタグは、主要なほぼすべてのモダンなブラウザでサポートされています。しかし、ビデオフォーマットの互換性には違いがあります。以下の表は各ブラウザと対応フォーマットを示します。
| ブラウザ | MP4 (H.264) | WebM | Ogg |
|---|---|---|---|
| Google Chrome | 対応 | 対応 | 対応 |
| Mozilla Firefox | 対応 | 対応 | 対応 |
| Safari | 対応 | 非対応 | 非対応 |
| Microsoft Edge | 対応 | 対応 | 対応 |
対応タグの属性
videoタグには多くの属性があります。その主なものを以下に示します。
src: 再生するビデオファイルのパスcontrols: ビデオコントロール（再生、一時停止、音量調整など）を表示autoplay: ページ読み込み時にビデオを自動再生loop: ビデオをループ再生muted: 自動再生時のミュート設定poster: ビデオが再生される前に表示する画像widthとheight: ビデオの幅と高さ
タグのイベント
videoタグによって発生する主なイベントには以下のものがあります。
play: 再生が開始された時pause: 再生が一時停止された時ended: ビデオの再生が終了した時timeupdate: 再生時間が更新された時volumechange: ボリューム設定が変更された時
コード実例
以下は実際に使えるビデオ埋め込みのコード例です。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
お使いのブラウザはvideoタグをサポートしていません。
</video>関連QA
Q1: すべてのブラウザで同じビデオファイルを再生できますか？
A1: いいえ、ビデオファイルのフォーマットによっては対応していないブラウザもあります。複数のフォーマットを用意することをおすすめします。
Q2: autoplay属性を使用した場合、すべてのブラウザで自動再生されますか？
A2: いいえ、ユーザーの体験を保護するため、自動再生は一部のブラウザで制限されることがあります。特に音声が有効である場合です。
Q3: ビデオに字幕を追加するにはどうすればよいですか？
A3: trackタグを使用して、ビデオに字幕やキャプションを追加できます。例:
<track kind="subtitles" src="subtitles.vtt" srclang="ja" label="日本語">