この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: 動画・音声
SEOタイトル: HTML5 video / audio 要素完全ガイド

この記事の要点
  • 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サムネイル画像再生前に表示
playsinlineiOS でインライン再生iOS Safari 必須
width / heightサイズ (CLS 防止)CSS で上書き可
crossoriginCORS 設定JS 解析用
disablepictureinpicturePiP 無効化映像配信で利用

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

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

フォーマットMIMEコーデック対応
WebMvideo/webmVP9 / VP8 / AV1 + Vorbis/OpusChrome/Firefox/Edge
MP4 (H.264)video/mp4H.264 + AAC全ブラウザ (★最も安全)
MP4 (HEVC/H.265)video/mp4H.265 + AACSafari / Edge / 一部のみ
MP4 (AV1)video/mp4AV1Chrome 70+/Firefox/Edge
Ogg Theoravideo/oggTheora + 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用途
MP3audio/mpeg万能、最も互換
AAC (.m4a)audio/aaciOS/macOS 標準
Opus (in OGG/WebM)audio/ogg; codecs=opus音質/サイズで最強
FLACaudio/flacロスレス、大サイズ
WAVaudio/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 由来).m3u8Safari ネイティブ、他は hls.js
MPEG-DASH (ISO 標準).mpd主要ブラウザは MSE 経由 (dash.js)
CMAFHLS/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 を付ける。