この記事の要点

HTML5 で標準化された 要素で、Flash 不要でメディア再生 基本: / 複数フォーマットは でフォールバック 字幕は で WebVTT (.vtt) 形式 属性: autoplay / muted / loop / preload / poster 高度な再生: MSE (Media Source Extensions)、HLS / MPEG-DASH、WebRTC

HTML5 video / audio 要素

2012 年に HTML5 で標準化された / 要素により、Flash Player などプラグイン不要で動画・音声を再生できるようになりました。現代の Web の動画再生はほぼすべてこの仕組みを土台にしています。

video 要素の基本

主な属性

属性	意味	注意
src	メディアファイルの URL	を使う場合は省略
controls	ブラウザ標準コントロール表示	UI カスタマイズ時は外す
autoplay	自動再生	多くのブラウザで muted 必須
muted	初期ミュート	autoplay とセット
loop	ループ再生	BGM 用途
preload	事前読み込み戦略	none/metadata/auto
poster	サムネイル画像	再生前に表示
playsinline	iOS でインライン再生	iOS Safari 必須
width / height	サイズ (CLS 防止)	CSS で上書き可
crossorigin	CORS 設定	JS 解析用
disablepictureinpicture	PiP 無効化	映像配信で利用

source 要素で複数フォーマット

ブラウザは を上から評価し、対応するフォーマットを再生します。順番が大事 (新しいフォーマットを先に書く)。

フォーマット	MIME	コーデック	対応
WebM	video/webm	VP9 / VP8 / AV1 + Vorbis/Opus	Chrome/Firefox/Edge
MP4 (H.264)	video/mp4	H.264 + AAC	全ブラウザ (★最も安全)
MP4 (HEVC/H.265)	video/mp4	H.265 + AAC	Safari / Edge / 一部のみ
MP4 (AV1)	video/mp4	AV1	Chrome 70+/Firefox/Edge
Ogg Theora	video/ogg	Theora + Vorbis	レガシー、現在ほぼ不要

実用上は MP4 (H.264) を最低 1 つ用意すれば全ブラウザで再生できます。帯域節約のため WebM (VP9/AV1) を先に置く構成が王道。

track 要素で字幕

WebVTT (.vtt) 形式のテキストファイルを で関連付けます。

# ja.vtt の中身例
WEBVTT

00:00:00.000 --> 00:00:03.500
こんにちは、私の名前は田中です。

00:00:03.500 --> 00:00:07.000
今日はテンプレートエンジンの話をします。

00:00:07.000 --> 00:00:12.000 line:90% align:center
BGM 開始

kind の種類: subtitles (字幕) / captions (聴覚障害者向け CC) / descriptions (視覚障害者向け音声説明) / chapters (チャプター) / metadata。

audio 要素

フォーマット	MIME	用途
MP3	audio/mpeg	万能、最も互換
AAC (.m4a)	audio/aac	iOS/macOS 標準
Opus (in OGG/WebM)	audio/ogg; codecs=opus	音質/サイズで最強
FLAC	audio/flac	ロスレス、大サイズ
WAV	audio/wav	無圧縮、大サイズ

JavaScript API での制御

const v = document.querySelector('video');

// 再生 / 一時停止
v.play();           // Promise を返す (autoplay 制限で reject される場合あり)
v.pause();

// 状態取得
v.paused;           // true/false
v.duration;         // 総時間 (秒)
v.currentTime;      // 現在の再生位置 (秒)
v.volume;           // 0.0-1.0
v.muted;            // ミュート状態
v.playbackRate;     // 1.0=等倍, 2.0=倍速
v.ended;            // 再生終了か

// 操作
v.currentTime = 30;       // 30 秒地点へジャンプ
v.volume = 0.5;           // 音量 50%
v.playbackRate = 1.5;     // 1.5 倍速

// イベント
v.addEventListener('loadedmetadata', () => {
  console.log('長さ:', v.duration);
});
v.addEventListener('timeupdate', () => {
  // 再生中、頻繁に呼ばれる
});
v.addEventListener('ended', () => {
  console.log('再生終了');
});
v.addEventListener('error', (e) => {
  console.error('再生エラー', v.error);
});

// フルスクリーン
v.requestFullscreen();

// Picture-in-Picture (PiP)
await v.requestPictureInPicture();

autoplay の制限

2018 年以降、Chrome / Safari / Firefox は音声付き自動再生をブロックします。理由は広告の音声暴発防止。回避するには:

• muted 属性を必ず付ける
• ユーザー操作 (クリック / タップ) 後にプログラムから play() 呼び出し
• サイトの Media Engagement Index が高ければ Chrome は解禁する

// Promise の reject に対処
v.play()
  .then(() => {
    // 再生開始
  })
  .catch(err => {
    if (err.name === 'NotAllowedError') {
      // autoplay ブロック → ミュートして再試行
      v.muted = true;
      v.play();
    }
  });

ストリーミング: HLS / MPEG-DASH

長尺動画や帯域に応じた品質切替 (ABR = Adaptive Bitrate) には、ファイルをチャンク (例: 6 秒) に分割したストリーミングプロトコルを使います。

プロトコル	マニフェスト	ネイティブ対応
HLS (HTTP Live Streaming, Apple 由来)	.m3u8	Safari ネイティブ、他は hls.js
MPEG-DASH (ISO 標準)	.mpd	主要ブラウザは MSE 経由 (dash.js)
CMAF	HLS/DASH 共通フォーマット	両対応サーバの主流に

MSE (Media Source Extensions)

JavaScript からビデオバッファを直接操作する低レベル API。HLS/DASH ライブラリの基盤。

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

  const data = await fetch('chunk.mp4').then(r => r.arrayBuffer());
  sourceBuffer.appendBuffer(data);
});

WebRTC (ライブ通信)

ブラウザ間 P2P の双方向リアルタイム通信。ビデオ会議 (Zoom Web 版、Google Meet、Discord 等) で使用。

• 音声 / 映像 / データチャネルをサポート
• レイテンシ 100ms 以下
• STUN / TURN サーバ経由で NAT 越え
• SFU (Selective Forwarding Unit) で多人数会議

picture 要素との比較

要素	用途	typical
	単純画像	JPEG/PNG/WebP/AVIF
	レスポンシブ画像 (フォーマット切替)	AVIF→WebP→JPEG
	動画 (動く絵)	MP4/WebM
	音声のみ	MP3/AAC/Opus

FAQ

Q: YouTube/Vimeo の埋め込みと自前 video、どちらが良い？
A: トラフィック / ストレージ / トランスコード / プレイヤー UI を YouTube に任せられるので、埋め込みが圧倒的に楽。完全に自社で制御したい (DRM、課金、データ取得) 場合は自前。

Q: 動画の自動再生で音を出したい
A: 不可能 (ユーザー保護のため)。ミュート autoplay にしておき、ユーザーが音量ボタンを押した瞬間に音量上げる UX が一般的。

Q: モバイルで全画面にならない (iOS)
A: iOS Safari は playsinline 属性が無いと自動でフルスクリーンになります。逆にインライン再生したい場合は必ず playsinline を付ける。