Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<video>

『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	動画の表示サイズをピクセルで指定します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>videoサンプル</title>
</head>
<body>

  <!-- コントロール付きで動画を表示 -->
  <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">
    <p>お使いのブラウザは動画の再生に対応していません。</p>
  </video>

  <!-- 背景動画として自動再生・ループ・ミュート -->
  <video autoplay loop muted playsinline width="320">
    <source src="background.mp4" type="video/mp4">
  </video>

</body>
</html>

実行結果

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

┌─────────────────────────────────────────┐
│  [thumbnail.jpg がサムネイルとして表示] │
│  ▶ 0:00 ───────────────────── 🔊 ⛶    │
└─────────────────────────────────────────┘

概要

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

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

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