この記事の要点

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

HTML5 video / audio 要素

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

video 要素の基本

<!-- 最小構成 -->
<video src="movie.mp4" controls></video>

<!-- 推奨 (複数フォーマット対応 + ポスター + 推奨属性) -->
<video
  controls
  poster="thumb.jpg"
  preload="metadata"
  width="640" height="360"
  playsinline>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4"  type="video/mp4">
  <track kind="subtitles" src="ja.vtt" srclang="ja" label="日本語" default>
  <track kind="subtitles" src="en.vtt" srclang="en" label="English">
  <p>お使いのブラウザは video 要素に対応していません。
     <a href="movie.mp4">動画をダウンロード</a>してください。</p>
</video>

主な属性

属性	意味	注意
src	メディアファイルの URL	<source> を使う場合は省略
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 要素で複数フォーマット

ブラウザは <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) 形式のテキストファイルを <track> で関連付けます。

<video controls src="movie.mp4">
  <track kind="subtitles" src="ja.vtt" srclang="ja" label="日本語" default>
  <track kind="subtitles" src="en.vtt" srclang="en" label="English">
  <track kind="captions"  src="ja-cap.vtt" srclang="ja" label="日本語(CC)">
  <track kind="chapters"  src="chap.vtt"  srclang="ja" label="チャプター">
</video>

# 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
<i>BGM 開始</i>

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

audio 要素

<!-- 基本 -->
<audio src="podcast.mp3" controls></audio>

<!-- 複数フォーマット + 自動再生 (要 muted) -->
<audio controls loop muted autoplay>
  <source src="bgm.opus" type="audio/ogg; codecs=opus">
  <source src="bgm.aac"  type="audio/aac">
  <source src="bgm.mp3"  type="audio/mpeg">
</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 共通フォーマット	両対応サーバの主流に

<!-- HLS (Safari ネイティブ) -->
<video controls src="stream.m3u8"></video>

<!-- hls.js で他ブラウザにも対応 -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" controls></video>
<script>
const video = document.getElementById('video');
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource('stream.m3u8');
  hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = 'stream.m3u8';
}
</script>

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
<img>	単純画像	JPEG/PNG/WebP/AVIF
<picture>	レスポンシブ画像 (フォーマット切替)	AVIF→WebP→JPEG
<video>	動画 (動く絵)	MP4/WebM
<audio>	音声のみ	MP3/AAC/Opus

FAQ

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

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

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