オーディオとビデオ要素はどのように機能しますか?

Question

IT Interview Practice · Accepted Answer

`<audio>` と `<video>` はメディアをネイティブに埋め込み、組み込みコントロールと JavaScript API を備えています — プラグインは不要です。

```html
<video
  controls                    
  width="640"
  poster="thumbnail.jpg"      
  preload="metadata"          
>
  <source src="video.webm" type="video/webm" /> 
  <source src="video.mp4" type="video/mp4" />   
  <track kind="captions" src="caps.vtt" srclang="en" label="English" /> 
  Your browser does not support video.          
</video>
```

## 主要な属性

- **`controls`** — これがないと、UI は表示されません (JS 経由で制御します)。
- **複数の `<source>`** — ブラウザは最初にサポートする形式を使用します (クロスブラウザ対応の WebM/MP4)。
- **`poster`** — 再生前のプレースホルダー画像。
- **`preload`** — `none` / `metadata` / `auto`; 必要になるまで大きなファイルをダウンロードしないように `metadata` を使用します。
- **`autoplay muted loop`** — 背景ビデオ用 (ほとんどのブラウザは自動再生を許可するために **`muted` が必須です**)。
- **`<track>`** — アクセシビリティのための字幕/サブタイトル (`.vtt` ファイル)。

## JavaScript での制御

```js
const v = document.querySelector("video");
v.play();           // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
```

`<audio>` も同じように機能します。ただし、ビジュアルフレーム/ポスターがありません。

## なぜ重要なのか

ネイティブメディア要素は、クロスブラウザ再生、アクセシビリティ (サブタイトル via `<track>`)、およびカスタムプレイヤー用の完全な JS API を提供します。

format-fallback パターン、autoplay の `muted` ルール、パフォーマンスのための `preload` を理解することで、メディア埋め込みの実践的な必須項目をカバーします。

主要な属性

JavaScript での制御

なぜ重要なのか

関連する質問