HTML講座 / audio・video・iframeでメディアを埋め込む

音声にはaudio、動画にはvideo、別の文書の埋め込みにはiframeを使います。HTMLを書くだけではメディア本体や字幕は作成されないため、実在するファイルと適切なURLを用意し、再生・字幕・代替手段を別々に確認します。

音声と動画のファイルを準備する

次の例ではsample.mp3、sample.mp4、sample-poster.webpなどをHTMLと同じ場所に用意します。利用できる権利を持つファイルを使い、実際の名前と形式に合わせて変更してください。

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  Your browser does not support audio playback.
</audio>
<video controls width="640" height="360" poster="sample-poster.webp">
  <source src="sample.mp4" type="video/mp4">
  <track src="sample-en.vtt" kind="captions" srclang="en"
         label="English captions" default>
  Your browser does not support video playback.
</video>

controlsは標準の再生操作、posterは再生前の画像です。字幕のsample-en.vttも別のファイルで、参照を書くだけでは作られません。次は最初の3秒分だけのWebVTTの例です。UTF-8で保存し、実際の発話や重要な音に合う時刻と内容を用意します。

WEBVTT
00:00:00.000 --> 00:00:03.000
Welcome to Small Garden.

日本語の字幕を作る場合は本文だけでなくファイル名、srclang、ラベルも合わせます。音声に重要な情報があるなら文字起こしも用意します。拡張子を変えるだけで形式の変換はできません。パスと寸法は画像ファイルの扱いと同じように確認します。

iframeで別の文書を表示する

iframeはページ内に別の文書を表示します。次のURLは構造を示す仮の例で、動作する埋め込み先ではありません。提供元の正式な埋め込みURLに置き換えます。

<iframe
  src="https://example.com/embed/example"
  title="Introduction to the example content"
  width="640" height="360"
  loading="lazy"></iframe>

titleはフレームの目的を説明します。通常のページが開けても、相手が埋め込みを禁止している場合があります。外部コンテンツはCookie、プライバシー、読み込み速度にも影響するため、必要性と提供元の条件を確認します。読み込めない場合でも内容を理解できるよう、近くに題名や説明を置きます。

画面幅へ収め、ローカルのフレームで試す

幅640の属性だけでは狭い画面に収まるとは限りません。次のCSSをheadのstyleまたはCSSファイルへ入れます。動画は本来の比率を保ち、iframeはこの実習で16:9の枠を使います。

video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

次の二つを同じ場所へ順にembed.htmlとframe.htmlとして保存します。外部サービスや動画ファイルなしで、フレーム内の文書と別ページへの移動を試せます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Practice instructions</title>
</head>
<body>
  <h1>Small Garden instructions</h1>
  <p>This is a local example displayed inside an iframe.</p>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Frame practice</title>
  <style>
video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}
  </style>
</head>
<body>
  <h1>Read the instructions</h1>
  <iframe src="embed.html" title="Small Garden instructions" width="640" height="360"></iframe>
  <p><a href="embed.html">Open the instructions as a separate page</a></p>
</body>
</html>

frame.htmlを開き、内部の見出しと文章を確認し、390ピクセル程度でも収まるか、別ページを開くリンクも使えるか試します。実際のメディアには次のような代替リンクも使えますが、ファイルと文字起こしを本当に用意してから接続します。

<p><a href="sample.mp4">Open the example video file</a></p>
<p><a href="transcript.html">Read the video transcript</a></p>

audioやvideo内のフォールバック文は、要素をサポートしない環境向けです。対応ブラウザーでファイルの読み込みが失敗した際に必ず出るエラー文ではないため、必要な代替手段はプレーヤーの外にも用意します。

再生・字幕・表示の失敗を切り分ける

ファイルの存在、パス、サーバーのメディア型、実際の符号化形式へのブラウザー対応を確認します。字幕ではVTTの拡張子、UTF-8、時刻も確認し、ローカルで失敗する場合は同一オリジンのHTTP開発サーバーで条件を比較します。

外部埋め込みは提供元の制限、横にはみ出す場合はCSSと比率を調べます。MDNのvideoとiframeを参照し、キーボードでの操作確認も再生ボタンや代替リンクに対して実施します。