HTML video要素の使い方｜source・自動再生・muted・playsinline

▶

編集

この記事の要点

<video> は HTML に動画を埋め込む要素。MP4 / WebM / Ogg などに対応
主な属性: src / controls / autoplay / muted / loop / playsinline / poster / preload
複数フォーマット提供は <source> 子要素で並べ、上から評価される
自動再生は muted + playsinline が必須（モバイルブラウザの仕様）
字幕は <track kind="subtitles"> で WebVTT (.vtt) を読み込む

video 要素とは

<video> は HTML5 で導入された動画埋め込み要素です。プラグイン不要でブラウザネイティブの動画再生 UI（再生ボタン・ボリューム・全画面）を提供します。

基本構文

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

controls を付けるとブラウザ標準の再生 UI が表示されます。src 単体だけの場合、UI なしで再生されません（autoplay を併用しない限り何も起きない）。

主要属性

属性	意味
`src`	動画ファイル URL
`controls`	再生 UI を表示
`autoplay`	ページ読み込み時に自動再生
`muted`	ミュート再生（autoplay と組合せで重要）
`loop`	繰り返し再生
`playsinline`	iOS Safari でインライン再生（全画面化しない）
`poster`	再生前のサムネイル画像 URL
`preload`	事前読み込みヒント: `none` / `metadata` / `auto`
`width` / `height`	表示サイズ（CSS でも可）
`crossorigin`	CORS 設定: `anonymous` / `use-credentials`

複数フォーマットの提供（<source>）

ブラウザ間の対応フォーマット差を吸収するため、<source> を並べると上から順に「再生可能か」評価され、最初に対応したものが使われます。

<video controls width="640" poster="poster.jpg">
  <source src="movie.webm" type="video/webm" />
  <source src="movie.mp4"  type="video/mp4" />
  お使いのブラウザでは動画再生に対応していません。
</video>

タグの内側（テキスト部分）はフォールバックとして、video 自体に未対応のブラウザでのみ表示されます。

主要フォーマットの対応状況

形式	拡張子	備考
MP4 (H.264 / AAC)	.mp4	もっとも互換性高い。基本これだけでも可
WebM (VP9 / Opus)	.webm	圧縮率良好、Chrome / Firefox 中心
Ogg (Theora / Vorbis)	.ogv	レガシー Firefox 用、現在ほぼ不要
HEVC (H.265)	.mp4	Safari 中心。配信用には注意
AV1	.mp4 / .webm	最新コーデック、互換性は徐々に拡大

自動再生のルール

多くのブラウザは「音ありの自動再生をブロック」する仕様です。ユーザー操作なしで再生したいときは以下を必ず守ります。

muted 必須
iOS Safari では playsinline も必須（無いと全画面化される）
autoplay + loop + muted + playsinline が「動く背景」ハック

<!-- 自動再生する動く背景 -->
<video
  src="hero.mp4"
  autoplay
  muted
  loop
  playsinline
  preload="metadata">
</video>

poster でファーストビューを軽く

動画は重いので、再生前は静止画を見せて体感速度を上げるのがセオリーです。

<video controls poster="/img/poster.jpg" preload="none">
  <source src="lesson.mp4" type="video/mp4" />
</video>

字幕・トラック（<track>）

WebVTT 形式の字幕を読み込めます。

<video controls>
  <source src="movie.mp4" type="video/mp4" />
  <track src="ja.vtt"  kind="subtitles" srclang="ja" label="日本語" default />
  <track src="en.vtt"  kind="subtitles" srclang="en" label="English" />
</video>

kind には subtitles（聞こえる人向け字幕）/ captions（聞こえない人向け、効果音含む）/ descriptions（解説音声）/ chapters（チャプター）/ metadata がある。

JavaScript API

video 要素は HTMLMediaElement を継承し、JS から細かく制御できます。

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

v.play();         // 再生
v.pause();        // 一時停止
v.currentTime = 30; // 30 秒地点へシーク
v.playbackRate = 1.5; // 1.5 倍速
v.volume = 0.5;   // 音量 50%

v.addEventListener('timeupdate', () => {
  console.log('current', v.currentTime, '/', v.duration);
});

v.addEventListener('ended', () => {
  console.log('再生完了');
});

主なイベント	意味
`play` / `pause`	再生開始 / 一時停止
`ended`	最後まで再生完了
`timeupdate`	再生位置の変化
`loadedmetadata`	長さ・解像度などのメタが取得できた
`canplay` / `canplaythrough`	再生開始可能
`error`	読み込み失敗

レスポンシブ対応

video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 16:9 のアスペクト比を保つ */
.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
}
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

セキュリティと配信

HTTPS 配信が必須（特に自動再生ポリシー）
外部ドメインから読み込むときは CORS 設定（crossorigin）に注意
大きな動画はHLS / DASHでストリーミング化（video.js や hls.js）
無断複製を完全に防ぐ DRM が必要なら EME (Encrypted Media Extensions)

モバイル対応の落とし穴

症状	原因
iOS で全画面化される	`playsinline` を付けていない
音が出ない	`muted` 必須かつ初回再生はユーザー操作後にのみ可能
再生開始まで遅い	`preload="auto"` + 動画自体のmoov atomを先頭に
WebView でブロックされる	ホストアプリ側で `WKAppBoundDomains` 等の設定が必要

YouTube / Vimeo 埋め込みとの違い

項目	video 要素	YouTube iframe
動画ホスティング	自前サーバ	YouTube 側
UI カスタマイズ	自由	パラメータ範囲内
帯域コスト	自前で負担	無料
SEO	VideoObject 構造化データを自作	YouTube 側で処理
広告	付かない	付くことがある

FAQ

Q: GIF の代わりに動画を使うと軽い？
A: はい。MP4/WebM は GIF より大幅に小さくなることが多く、画質も良好です。autoplay muted loop playsinline で GIF 風に再生できます。

Q: 動画のシークだけ許可したい / 早送り禁止にしたい
A: controlslist="nodownload noplaybackrate" や JS で seeking イベントを抑止します（完全には防げません）。

Q: 字幕の言語切替は？
A: 同じ video に複数 <track> を並べ、ユーザーが UI から選択できます。default を付けたものが初期表示。

ページ一覧

その他