<img>、<audio>、<video>
controls、autoplay、loop、muted
<img>，HTML 還能直接支援音樂與影片。autoplay 一般要搭配 muted，否則瀏覽器可能阻止。<audio>、<video> 內可加文字提示，若瀏覽器不支援就會顯示。<body>
<h1>多媒體元素示範</h1>
<h2>圖片</h2>
<img src="images/sample.jpg" alt="一張示範圖片" width="300">
<h2>音樂</h2>
<audio controls>
<source src="media/music.mp3" type="audio/mpeg">
你的瀏覽器不支援音訊播放。
</audio>
<h2>影片</h2>
<video width="400" controls muted>
<source src="media/video.mp4" type="video/mp4">
你的瀏覽器不支援影片播放。
</video>
</body>
controls → ✅ 使用者需要操作介面autoplay 未搭配 muted → ✅ 多數瀏覽器禁止有聲自動播放alt 或文字提示 → ✅ 提供替代說明，增加無障礙體驗alt 屬性的圖片<audio> 播放器，能播放 mp3<video> 播放器，帶有 controls
autoplay 搭配 muted 的效果今天學到的多媒體元素讓我感覺網頁變得更加生動。以前只會插入圖片，但現在發現音樂與影片也能直接嵌入，讓內容更豐富。尤其是 <audio> 與 <video> 的 controls，讓使用者能自由控制播放，體驗更加友善。
我也注意到 autoplay 在現代瀏覽器裡不一定會生效，通常要搭配 muted 才能順利運作。這讓我理解，良好的使用者體驗比強制自動播放更重要。
在練習過程中，我特別嘗試加上「替代文字」與「提示文字」，確保就算媒體無法播放，也能讓使用者理解內容。這也再次強調 HTML 的語意設計，是為了讓更多人能接觸與理解網頁。
今天的練習讓我覺得網頁開始有了聲音與影像，真正展現「多媒體」的魅力。
iThome鐵人賽
看影片追技術