<audio> と <video> はメディアをネイティブに埋め込み、組み込みコントロールと JavaScript API を備えています — プラグインは不要です。
html
Your browser does not support video.
controls — これがないと、UI は表示されません (JS 経由で制御します)。<source> — ブラウザは最初にサポートする形式を使用します (クロスブラウザ対応の WebM/MP4)。poster — 再生前のプレースホルダー画像。preload — none / metadata / auto; 必要になるまで大きなファイルをダウンロードしないように metadata を使用します。autoplay muted loop — 背景ビデオ用 (ほとんどのブラウザは自動再生を許可するために muted が必須です)。<track> — アクセシビリティのための字幕/サブタイトル (.vtt ファイル)。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 を理解することで、メディア埋め込みの実践的な必須項目をカバーします。