実行できるHTMLドキュメント: video タグ

Q: HTML で動画を追加するにはどうすればいいですか？

と書きます。controls 属性でブラウザの再生ボタン、シークバー、音量が表示されます。これがないと、動画は最初のフレーム (またはポスター) を表示するだけで、ユーザーは再生を始められません。

Q: 動画が自動再生されないのはなぜですか？

ブラウザは音声付きの自動再生をブロックします。autoplay の横に muted を、iPhone で全画面ではなくページ内で再生させるために playsinline を付けましょう: 。

Q: Web ではどの動画形式を使えばいいですか？

H.264 の MP4 は現在のどのブラウザでも再生できるので、安全な初期値です。 でより小さな WebM ファイルを先に並べ、ブラウザに対応する最初の形式を選ばせることもできます。

Q: 動画にサムネイルを付けるには？

poster 属性に画像の URL を指定します: 。動画の再生が始まるまで画像が表示されます。

Q: HTML の動画に字幕を付けるには？

動画の中に を追加します。ファイルは WebVTT 形式で、ブラウザはコントロールに字幕のボタンを表示します。

Q: 動画をレスポンシブにするには？

CSS で width: 100% と height: auto (または max-width: 100%) を指定します。動画は入れ物に合わせて伸び縮みし、縦横比を保ちます。

動画を追加する方法

<video> 要素で動画ファイルを指定し、読者が再生できるよう controls を付けます。

<video src="movie.mp4" controls width="640"></video>

controls を付けると、ブラウザ独自のプレーヤーが表示されます。再生と一時停止、シークバー、音量、全画面表示です。これがないと動画はただそこにあるだけです。このプレビューは動画ファイルを読み込めないので、このページの例ではスクリプトで描いた小さな canvas のアニメーションを要素に流しています。属性はファイルのときとまったく同じように動きます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

ソースがファイルではなくライブのストリームなので、ここではシークバーをドラッグできず、決まった長さもありません。本物の .mp4 なら、同じプレーヤーに完全なシークバーが付きます。

video の属性

属性	働き
`controls`	ブラウザのプレーヤーのコントロールを表示する
`autoplay`	再生できる状態になったらすぐに再生を始める (実際には `muted` のときだけ)
`muted`	音声をオフにした状態で始める
`loop`	終わったら最初からもう一度再生する
`playsinline`	iPhone で全画面に切り替えずにページ内で再生する
`poster="thumb.jpg"`	動画の再生前に表示する画像
`preload`	`none`、`metadata` (サイズと長さだけ)、`auto` (どれだけダウンロードするかブラウザが決める)
`width`、`height`	ピクセルでのサイズ。両方指定すると、動画の読み込み前から場所を確保する

自動再生、muted、loop

ブラウザは、音声付きで勝手に再生が始まる動画をブロックします。ミュートした動画なら自動再生でき、背景動画やループする短いクリップはこの仕組みで動いています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

4 つの属性はセットで使います。再生を始める autoplay、ブラウザに許可させる muted、クリップを繰り返す loop、iPhone で全画面にしない playsinline です。音声付きの自動再生はブロックされるだけでなく、読み上げの音声がかき消されるスクリーンリーダーのユーザーにとっても問題です。クリップが 5 秒より長く再生されるなら、一時停止する手段を用意しましょう。

ポスター画像と preload

poster は、サムネイルのように、動画の再生前に画像を表示します。ここでは動画にソースがまったくないので、見えるのはポスターだけです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

preload="none" なら、読者が再生を押すまでブラウザは何もダウンロードせず、ポスターがあるので場所が空っぽに見えません。再生前に長さを表示したいなら preload="metadata" を使います。ポスターがない場合、ほとんどのブラウザは最初のフレームを読み込んだ時点でそれを表示します。

source による形式と代替手段

src の代わりに、<source> 要素で複数のファイルを並べられます。ブラウザは対応している最初のものを再生します。

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

H.264 の MP4 は現在のどのブラウザでも再生できるので、ファイルが 1 つだけなら安全な選択です。type 属性があれば、ブラウザは再生できない形式をダウンロードせずに飛ばせます。最後のテキストは、<video> にまったく対応していないブラウザでだけ表示されます。

track による字幕

<track kind="captions"> は、時間指定の行を並べたプレーンテキストのファイルである WebVTT ファイルを読み込みます。ブラウザはコントロールに字幕のボタンを追加し、動画の上にテキストを描きます。

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

字幕は、耳が聞こえない、または聞こえにくい視聴者、音を消して見ている人、第二言語で動画を見ている人の助けになります。クリックしなくても表示させるには、track に default を付けます。別のドメインにある字幕ファイルには、CORS ヘッダーと動画の crossorigin が必要です。

CSS でのスタイルと JavaScript での制御

動画は画像と同じ置換要素です。width: 100% と height: auto でレスポンシブになり、object-fit で形の違う箱をどう埋めるかを決めます。JavaScript では play()、pause()、currentTime、volume と、play、pause、ended などのイベントが使えます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() は、ブラウザが再生をブロックしたとき (たとえばミュートしていない自動再生) に拒否される Promise を返すので、本番のコードでは catch しましょう。独自のコントロールを作るかどうかは自由です。組み込みの controls はキーボードで操作でき翻訳もされていますが、独自のボタンではそれを再現しなければなりません。YouTube や Vimeo にある動画は、代わりに iframe でそのプレーヤーを埋め込みます。

よくある間違い

muted なしの自動再生。 ブラウザにブロックされます。muted と playsinline を付けましょう。
controls を忘れる。 独自のコントロールを作らない限り、読者は動画を再生できません。
width と height がない。 動画が読み込まれたときにページがずれます。両方を指定し、CSS で拡大縮小しましょう。
巨大なファイル。 Web 用に動画を圧縮し、ページの下のほうにある動画には preload="none" か "metadata" を使いましょう。
話し声のある動画に字幕がない。 <track kind="captions"> を追加しましょう。

よくある質問

HTML で動画を追加するにはどうすればいいですか？

<video src="movie.mp4" controls width="640"></video> と書きます。controls 属性でブラウザの再生ボタン、シークバー、音量が表示されます。これがないと、動画は最初のフレーム (またはポスター) を表示するだけで、ユーザーは再生を始められません。

動画が自動再生されないのはなぜですか？

ブラウザは音声付きの自動再生をブロックします。autoplay の横に muted を、iPhone で全画面ではなくページ内で再生させるために playsinline を付けましょう: <video autoplay muted loop playsinline>。

Web ではどの動画形式を使えばいいですか？

H.264 の MP4 は現在のどのブラウザでも再生できるので、安全な初期値です。<source> でより小さな WebM ファイルを先に並べ、ブラウザに対応する最初の形式を選ばせることもできます。

動画にサムネイルを付けるには？

poster 属性に画像の URL を指定します: <video poster="thumb.jpg" controls>。動画の再生が始まるまで画像が表示されます。

HTML の動画に字幕を付けるには？

動画の中に <track kind="captions" src="captions.vtt" srclang="en" label="English"> を追加します。ファイルは WebVTT 形式で、ブラウザはコントロールに字幕のボタンを表示します。

動画をレスポンシブにするには？

CSS で width: 100% と height: auto (または max-width: 100%) を指定します。動画は入れ物に合わせて伸び縮みし、縦横比を保ちます。

HTML の video タグ: controls、自動再生、poster、字幕