<video>

対応:		HTML5（2014）

『video』はHTMLに動画を埋め込むための要素で、プラグインなしでブラウザ上で動画を再生できます。

構文

<!-- 基本的な動画の埋め込み -->
<video src="movie.mp4" controls></video>

<!-- 複数のフォーマットを指定してフォールバック対応 -->
<video controls width="640" poster="thumbnail.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <p>お使いのブラウザは動画の再生に対応していません。</p>
</video>

主な属性

属性	概要
src	再生する動画ファイルのURLを指定します。
controls	再生・停止・音量などのコントロールパネルを表示します。
autoplay	ページ読み込み時に自動再生します。ブラウザによっては『muted』と組み合わせないと動作しない場合があります。
loop	動画が終了したら最初から繰り返し再生します。
muted	音声をミュートして再生します。
poster	動画の再生前に表示するサムネイル画像のURLを指定します。
preload	動画データの事前読み込み方法を指定します（none / metadata / auto）。
width / height	動画の表示サイズをピクセルで指定します。

サンプルコード

sample_video.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>videoサンプル</title>
</head>
<body style="margin: 20px;">

  <!-- 基本：コントロール付き、サムネイル、複数フォーマットでフォールバック -->
  <video controls width="640" height="360" poster="thumbnail.jpg">
    <!-- WebMを優先し、非対応なら MP4 を使用 -->
    <source src="sample.webm" type="video/webm">
    <source src="sample.mp4" type="video/mp4">
    <!-- 字幕トラックの追加 -->
    <track src="subtitles_ja.vtt" kind="subtitles" srclang="ja" label="日本語">
    <p>お使いのブラウザは動画の再生に対応していません。</p>
  </video>

  <!-- 背景動画：自動再生・ループ・ミュート（iOSはplaysinline必須） -->
  <video autoplay loop muted playsinline width="320">
    <source src="background.mp4" type="video/mp4">
  </video>

  <!-- JavaScriptで再生・停止を制御する -->
  <video id="myVideo" src="sample.mp4" width="400" preload="metadata"></video>
  <button onclick="document.getElementById('myVideo').play();">再生</button>
  <button onclick="document.getElementById('myVideo').pause();">停止</button>

</body>
</html>

実行結果

最初の『video』要素はサムネイル画像を表示し、コントロールパネル付きで動画を再生できます。2つ目はミュートで自動再生されループします。

サンプルページはこちら

JavaScriptで再生を制御する

『video』要素も『audio』要素と同じプロパティ・メソッドで制御できます。追加で動画専用のプロパティがあります。

プロパティ / メソッド	概要
play() / pause()	再生・停止します。
currentTime	現在の再生位置（秒）を取得・設定します。
duration	動画の総再生時間（秒）を取得します。
volume / muted	音量・ミュート状態を取得・設定します。
playbackRate	再生速度を取得・設定します（1.0=通常、2.0=2倍速）。
requestFullscreen()	全画面表示を要求します。
videoWidth / videoHeight	動画の実際の解像度（幅・高さ）をピクセルで取得します。

<video id="myVideo" src="sample.mp4" width="640" preload="metadata"></video>

<div>
  <button id="playBtn">再生</button>
  <button id="fullscreenBtn">全画面</button>
  <input type="range" id="seek" min="0" step="0.1" value="0">
</div>

<script>
var video = document.getElementById('myVideo');
var playBtn = document.getElementById('playBtn');
var seekBar = document.getElementById('seek');

// 再生・停止トグル
playBtn.addEventListener('click', function() {
  if (video.paused) {
    video.play();
    playBtn.textContent = '停止';
  } else {
    video.pause();
    playBtn.textContent = '再生';
  }
});

// メタデータ読み込み完了時にシークバーの最大値を設定
video.addEventListener('loadedmetadata', function() {
  seekBar.max = video.duration;
});

// 再生位置に合わせてシークバーを更新
video.addEventListener('timeupdate', function() {
  seekBar.value = video.currentTime;
});

// シークバー操作で再生位置を変更
seekBar.addEventListener('input', function() {
  video.currentTime = this.value;
});

// 全画面
document.getElementById('fullscreenBtn').addEventListener('click', function() {
  video.requestFullscreen();
});
</script>

CSSでレスポンシブ動画に対応する

動画をレスポンシブにするには、CSSで幅を100%にして高さを自動調整します。アスペクト比を保ちたい場合は『aspect-ratio』プロパティが便利です。

<style>
  /* シンプルなレスポンシブ動画 */
  video {
    max-width: 100%;
    height: auto;
  }

  /* アスペクト比固定のラッパー（16:9の場合） */
  .video-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
  }
  .video-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 背景動画のスタイル */
  .hero-bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.5;
  }
</style>

<!-- アスペクト比固定のレスポンシブ動画 -->
<div class="video-wrapper">
  <video controls>
    <source src="sample.webm" type="video/webm">
    <source src="sample.mp4" type="video/mp4">
  </video>
</div>

概要

『video』要素はHTML5で導入された要素で、Flash等のプラグインなしにブラウザで動画を再生できます。対応するフォーマットはブラウザによって異なりますが、MP4（H.264）は現在ほぼすべてのブラウザでサポートされています。WebMはファイルサイズが小さい傾向があり、両方を『source』で指定しておくのがお勧めです。

『autoplay』を指定しても、多くのブラウザでは音声が有効な状態では自動再生がブロックされます。背景動画など音なしで自動再生したい場合は、『muted』属性と合わせて使用してください。また、スマートフォンのSafariでは『playsinline』属性を付けないとフルスクリーンで再生される場合があります。

音声のみを再生したい場合は『audio』要素を使用してください。