💡 この記事でわかること
- video要素・audio要素とは何か
- 基本的な書き方とcontrols属性
- source要素での複数フォーマット対応
- autoplay・loop・muted属性と自動再生の注意点
- 初心者がつまずきやすいポイント
1. video要素・audio要素とは？
video要素・audio要素とは、
👉 プラグインを使わずに、HTML単体で動画・音声ファイルを再生するためのタグです。
自分のサーバーに置いた動画ファイルや音声ファイルをそのまま再生したいときに使います。YouTubeなど外部サービスの動画を埋め込みたい場合はiframe要素を使うのが一般的で、video要素は「自分で用意した動画・音声ファイル」を再生する場面で使う、とすみ分けて覚えておくと分かりやすいです。
2. video要素の基本的な書き方
src属性に動画ファイルのパスを指定し、controls属性を付けると、再生・一時停止・音量などを操作できる標準の操作パネルが表示されます。
<video src="movie.mp4" controls width="600"></video>💡 controls属性を付けないと、操作パネルが表示されず、そのままでは再生・停止ができません。JavaScriptで独自に操作パネルを作る場合を除き、基本的にはcontrols属性を付けておきましょう。
3. source要素で複数フォーマットに対応する
動画・音声のファイル形式は、ブラウザによって再生できるものが異なる場合があります。source要素を使うと、複数のファイル形式を候補として並べておき、ブラウザが再生できる形式を自動で選ばせることができます。
<video controls width="600">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
お使いのブラウザは動画再生に対応していません。
</video>👉 source要素は上から順に試され、ブラウザが再生できる最初の形式が使われます。videoタグの中に書いたテキスト(この例では「お使いのブラウザは〜」の部分)は、どの形式にも対応していない場合にだけ表示されます。
4. autoplay・loop・muted属性
video要素・audio要素には、再生のふるまいを制御する属性がいくつか用意されています。
- autoplay属性: ページ読み込み時に自動で再生を開始する
- loop属性: 再生が終わったら最初に戻って繰り返し再生する
- muted属性: 音声を消した状態にする
<video src="movie.mp4" autoplay muted loop></video>⚠️ 多くのブラウザでは、ユーザーの操作を挟まずに音声付きで自動再生することをブロックする仕様になっています。autoplay属性を使って動画を自動再生したい場合は、muted属性も一緒に付けておくのが基本です。
5. audio要素の書き方
audio要素はvideo要素とほぼ同じ属性が使え、width・heightのような表示サイズの指定がない(音声だけなので)点が違いです。
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>6. 初心者がつまずきやすいポイント
画面サイズに合わせて幅を調整する
width属性に固定の数値を指定すると、スマートフォンなど画面の狭い端末で動画がはみ出すことがあります。CSSでwidth: 100%; height: auto;のように指定すると、親要素の幅に合わせて縦横比を保ったまま調整されます。
著作権に注意する
video・audio要素で再生できるのは、あくまで自分で権利を持っている、または利用が許可されているファイルのみです。他人が制作した動画・音楽ファイルを無断でアップロードして再生することはできません。
まとめ
video要素・audio要素を使うと、プラグインなしでHTML単体で動画・音声ファイルを再生できます。
- controls属性で標準の操作パネルを表示できる
- source要素で複数フォーマットに対応できる
- autoplayで自動再生する場合はmuted属性も付けるのが基本
- YouTubeなど外部サービスの動画埋め込みはiframe要素を使う
手元の動画・音声ファイルを1つ用意して、controls属性付きのvideo・audioタグで再生を試してみましょう。