プラグインなしで、音声・動画・キャプション付きの図版を埋め込む。
このレッスンを Kodokon で開くHTML は音声と動画をネイティブに再生します。外部プレーヤーは不要です。現実の利用例: ブログのポッドキャストのエピソード、ランディングページの製品デモ、ドキュメントに埋め込まれたチュートリアルなど。正しいやり方を見ていきましょう。
<video controls width="640" poster="preview.jpg">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
<track src="subs-fr.vtt" kind="subtitles"
srclang="fr" label="French" default>
Your browser doesn't support HTML5 video.
</video>プロとしての要点は3つです。source 要素は 順番に 試され、ブラウザはデコードできる最初のものを再生します。poster 属性は再生前にプレースホルダー画像を表示します。最後に、track は WebVTT 形式の字幕を追加します。アクセシビリティに不可欠で、消音での視聴でも大いに重宝されます。
<audio controls preload="metadata">
<source src="podcast-ep12.mp3" type="audio/mpeg">
<a href="podcast-ep12.mp3">Download the episode</a>
</audio>コンテンツを図示するために、figure はメディア要素とそのキャプションを figcaption で対にします。しかも画像だけではありません。グラフ、コードスニペット、引用も良い候補です。キャプションは figure に プログラム的に 結びつけられます。画像の下に置いた単なる段落では得られないものです。
<figure>
<img src="chart-sales.png"
alt="Sales up 12% in Q2 2026">
<figcaption>
Sales trend, second quarter of 2026.
</figcaption>
</figure>