影片與聲音
HTML5 提供 <video> 與 <audio>，瀏覽器內建播放器，不必 Flash。若影片已經放在 YouTube、Vimeo，也可以用 iframe 嵌入（本站各頁的教學影片就是這種做法）。
自己託管檔案時，要處理格式、控制列、字幕與流量；用平台嵌入則省頻寬，但會受對方播放器與隱私政策影響。
原生 video
<video controls width="640" poster="images/intro.jpg">
<source src="media/intro.mp4" type="video/mp4">
<source src="media/intro.webm" type="video/webm">
<p>瀏覽器不支援 HTML 影片，請<a href="media/intro.mp4">下載 MP4</a>。</p>
</video>
| 屬性／子元素 | 作用 |
|---|---|
controls |
顯示播放、暫停、音量。沒有它，使用者可能無法操作。 |
poster |
播放前顯示的封面圖。 |
width |
顯示寬度。高度可讓瀏覽器依比例計算。 |
source |
同一支影片的不同格式，瀏覽器會挑它支援的第一個。 |
| 後備文字 | 極舊瀏覽器才看得到；現在仍建議留著。 |
自動播放（autoplay）通常要搭配 muted，否則多數瀏覽器會擋下來。教學與內容頁盡量不要一進頁就出聲。
迴圈用 loop，預載用 preload。頻寬敏感時可設 preload="none" 或 metadata。
原生 audio
<audio controls>
<source src="media/intro.mp3" type="audio/mpeg">
<source src="media/intro.ogg" type="audio/ogg">
</audio>
觀念與 video 相同，只是沒有畫面。同樣應提供 controls。
字幕
聽障使用者、靜音觀看、非母語觀眾都需要字幕。用 track 指向 WebVTT 檔：
<video controls src="media/intro.mp4">
<track kind="subtitles" srclang="zh-Hant" src="media/intro-zh.vtt" label="中文" default>
</video>
kind="captions" 用於包含音效描述的字幕；subtitles 多為對白翻譯。MDN 有完整說明：HTML 影片與音訊。
iframe 嵌入
YouTube 提供的分享 → 嵌入，核心是：
title 必填，否則 iframe 在輔助科技裡會變成無名框。本站用 .video-wrapper 包住 iframe，以維持 16:9 比例（見全站 CSS）。
能自己控制播放體驗、隱私與字幕時，優先原生 video；內容已在影音平台、或要省伺服器流量時，用 iframe。
推薦影音
課程中的 video／audio 示範
簡述：Bro Code 的一小時 HTML 教學包含圖片、聲音與影片標籤，可快轉到多媒體段落，對照本頁的 controls 與 source。
完整 HTML5 課程（含多媒體）
簡述：Dave Gray 四小時綜合課涵蓋文件結構到多媒體。若想一次看完 HTML5 標籤再回頭查本頁，這支適合作為長課程。