2026年4月16日
HTML video・audio タグとは？
ウェブページに動画や音声を埋め込むには、HTML5で追加された videoタグ と audioタグ を使います。プラグインなしでブラウザ標準の機能で再生できます。
以前はFlash Playerなどのプラグインが必要でしたが、HTML5からはブラウザだけで動画・音声を再生できるようになりました。文化祭のページに動画を載せたり、音楽の授業で作った曲を公開したりするときに使えます。
この記事では、videoタグとaudioタグの基本的な使い方から、レスポンシブ対応、アクセシビリティ対応、パフォーマンス最適化まで、実践的な内容をコード例付きで解説します。
videoタグ：動画を埋め込む
<video src="movie.mp4" controls>
お使いのブラウザはvideoタグに対応していません。
</video>controls 属性をつけると、再生ボタン・音量調整・シークバーなどの操作UIが表示されます。controls をつけないと、ユーザーが動画を操作できないので注意しましょう。
主な属性：
| 属性 | 意味 |
|---|---|
controls | 再生・停止・音量などのコントロールを表示 |
autoplay | 自動再生（muted と組み合わせが必要） |
loop | 繰り返し再生 |
muted | ミュート状態で再生 |
poster | 再生前に表示するサムネイル画像 |
width / height | 動画のサイズ |
<video
src="movie.mp4"
controls
poster="thumbnail.jpg"
width="640"
muted
loop
></video>🔥 metaタグの書き方で実践してみましょう。
複数フォーマットを指定する（sourceタグ）
ブラウザによって対応する動画フォーマットが異なります。<source> タグで複数のフォーマットを指定すると、対応しているものが使われます。ブラウザは上から順にチェックし、最初に対応しているフォーマットを再生します。
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
お使いのブラウザはvideoタグに対応していません。
</video>現在はMP4（H.264コーデック）がほぼすべてのブラウザで対応しているため、MP4だけでも問題ありません。WebMはファイルサイズが小さいので、両方用意できるとベストです。動画変換ツール（HandBrakeなど）を使えば、簡単にフォーマットを変換できます。変換時に解像度やビットレートも調整できるので、Web用に最適化しましょう。ファイルサイズが小さいほど、ページの読み込みが速くなります。特にモバイルユーザーは通信速度が遅いことがあるので、動画の最適化は重要です。PageSpeed Insightsでスコアを確認しながら改善しましょう。動画の最適化だけでスコアが大幅に改善することもあります。ぜひ試してみてください。
💡 pictureタグで画像の複数フォーマット指定も学べます。
audioタグ：音声を埋め込む
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
お使いのブラウザはaudioタグに対応していません。
</audio>audioタグもvideoタグと同様に controls・autoplay・loop・muted 属性が使えます。
音声ファイルの形式は mp3 が最も広くサポートされています。ogg はオープンソースの形式で、Firefoxなどで使われます。両方指定しておくと安心です。BGMとして使う場合は loop 属性をつけると繰り返し再生されます。ただし、ユーザーの許可なく音声を自動再生するのはマナー違反なので、必ず controls をつけてユーザーが操作できるようにしましょう。
🔗 あわせて見出しタグの使い方もチェックしてみましょう。
字幕をつける（trackタグ）
動画に字幕をつけるには <track> タグを使います。聴覚に障害がある人や、音を出せない環境の人にも内容が伝わります。
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="ja" label="日本語">
</video>字幕ファイルはWebVTT形式（.vtt）で作成します。アクセシビリティの観点からも、動画には字幕をつけることが推奨されています。
レスポンシブ動画の埋め込み
YouTubeなどの外部動画を埋め込む場合は iframe を使います。レスポンシブ対応するには、アスペクト比を維持するCSSを適用します。YouTubeの「共有」→「埋め込み」からコードを取得し、以下のようにdivで囲むとスマホでもPCでも画面幅に合わせて自動リサイズされます。文化祭のページや学校紹介サイトで動画を使うときに便利です。iframeの埋め込みはYouTubeだけでなく、VimeoやGoogle Mapsなど他のサービスでも同じ方法が使えます。
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
allowfullscreen>
</iframe>
</div>padding-bottom: 56.25% は16:9のアスペクト比（9÷16=0.5625）を維持するテクニックです。
よくある間違いと注意点
- autoplayが効かない：ブラウザのポリシーにより、音声付き動画の自動再生はブロックされます。
mutedをつければ自動再生できます。これはユーザー体験を守るためのブラウザの仕様です。 - ファイルサイズが大きすぎる：動画は画像よりはるかに大きいです。1分の動画で数十MBになることもあります。長い動画はYouTubeにアップロードしてiframeで埋め込む方が効率的です。
- アクセシビリティ：動画には字幕（
<track>タグ）をつけると、聴覚に障害がある人にも内容が伝わります。音声コンテンツにはテキストの書き起こしを用意しましょう。 - モバイル対応：動画の幅は
max-width: 100%を指定して、スマホでもはみ出さないようにしましょう。height: autoも一緒に指定するとアスペクト比が維持されます。 - 通信量への配慮：モバイルユーザーはデータ通信量を気にします。動画の自動再生は避け、ユーザーが再生ボタンを押してから読み込む設計にしましょう。
preload="none"を指定すると、再生ボタンを押すまでデータを読み込みません。 - 対応フォーマットの確認：MP4（H.264）は最も広くサポートされています。WebMはファイルサイズが小さいですが、一部のブラウザでは非対応です。両方指定しておくのが安全です。
📖 HTML入門ガイドで基礎を確認できます。
🔗 画像の表示方法も合わせて学びましょう。
まとめ
- ✅ video：動画を埋め込む。
controlsで操作UIを表示 - ✅ audio：音声を埋め込む
- ✅ source：複数フォーマットを指定してブラウザ互換性を高める
- ✅
autoplayはmutedと組み合わせないと動作しないブラウザが多い
videoとaudioタグを使いこなすと、リッチなコンテンツが作れます。文化祭のページに動画を載せたり、部活の紹介動画を公開したりと、活用の幅が広がります。レッスンでさらに詳しく学んでみましょう。
動画・音声を使う場面の例
中高生がvideo・audioタグを活用できる場面を紹介します。
- 文化祭のWebサイト：クラスの出し物の紹介動画を埋め込む。YouTubeにアップしてiframeで埋め込むのが手軽です。
- 部活動の紹介ページ：練習風景や試合のハイライト動画を載せる。新入部員の勧誘に効果的です。
- 自由研究の発表：実験の様子を動画で記録して、Webページに埋め込む。写真だけでは伝わらない動きを見せられます。
- 音楽の作品公開：作曲した曲やバンド演奏をaudioタグで公開する。ポートフォリオとしても使えます。
- プログラミング作品のデモ：作ったアプリの操作方法を画面録画して動画で見せる。GitHubのREADMEにも使えます。
動画や音声を使うと、テキストと画像だけのページより格段に魅力的なコンテンツになります。ただし、ファイルサイズには注意しましょう。長い動画はYouTubeにアップロードしてiframeで埋め込むのがベストプラクティスです。短い動画（30秒以内）ならvideoタグで直接埋め込んでも問題ありません。
動画のパフォーマンス最適化
動画はファイルサイズが大きいため、ページの表示速度に影響します。以下の方法で最適化しましょう。
- preload属性を使う：
preload="none"にすると、再生ボタンを押すまでデータを読み込みません。モバイルユーザーの通信量を節約できます。preload="metadata"にすると、動画の長さやサムネイルだけ先に読み込みます。 - poster属性でサムネイルを設定：動画が読み込まれる前に表示される画像を指定できます。ユーザーに「ここに動画がある」ことを伝えられます。
- 動画の解像度を適切に：スマホで見るなら720p（1280x720）で十分です。4K動画をそのまま使うとファイルサイズが巨大になります。
- 動画の長さを短くする：Webページに埋め込む動画は30秒〜2分程度が適切です。長い動画はYouTubeに置きましょう。
<!-- 最適化された動画の埋め込み例 -->
<video
controls
preload="none"
poster="thumbnail.jpg"
width="640"
height="360"
>
<source src="demo.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="ja" label="日本語">
</video>この例では、preload="none" で不要なデータ読み込みを防ぎ、poster でサムネイルを表示し、width/height でレイアウトシフトを防いでいます。
よくある質問（FAQ）
Q. YouTubeの動画を埋め込むのとvideoタグ、どちらがいい？
長い動画（1分以上）はYouTubeに置いてiframeで埋め込むのがおすすめです。YouTubeが自動で画質を調整してくれるので、ユーザーの通信環境に合わせた再生ができます。短いデモ動画やループ動画はvideoタグが適しています。
Q. 動画が再生されないのはなぜ？
よくある原因は3つです。①ファイルパスが間違っている ②ブラウザが対応していないフォーマット ③autoplayにmutedがついていない。まずは開発者ツールのConsoleタブでエラーを確認しましょう。ファイルパスは相対パスで書くのが基本です。src="./videos/demo.mp4" のように、HTMLファイルからの相対位置を指定します。
Q. スマホで動画が全画面再生になってしまう
iOSのSafariでは、playsinline 属性をつけないと自動的に全画面再生になります。インライン再生したい場合は <video playsinline> を指定しましょう。
Q. 動画のファイルサイズを小さくするには？
無料ツール「HandBrake」を使うと、動画の解像度やビットレートを下げてファイルサイズを削減できます。Web用なら720p・ビットレート1500kbps程度で十分な画質が得られます。元の動画が4Kなら、10分の1以下のサイズになることもあります。
Q. 音声ファイルのおすすめフォーマットは？
MP3が最も広くサポートされており、ファイルサイズも小さいのでおすすめです。高音質が必要な場合はAACフォーマットも選択肢に入ります。OGGはオープンソースですが、Safariでは非対応なので注意しましょう。