<style>
.blue {
color: blue;
}
.red{
color: red;
}
</style>

> [name=講師｜Judy Shyu]

# 🚩影音元件

🔗 [CodePen 範例二](https://codepen.io/judyshyu/pen/OJdNJbZ?editors=1010)

* 除了上傳影音的欄位，需要替代文字／字幕欄位

* 前台結構（A級 - 文字描述）：

<video poster="{影片封面圖網址}" aria-describedby=”videoDescription” controls> <source src="{影片網址}" type="video/mp4"></video>
<p id=”videoDescription”>影片的場景來到了海邊，畫面中的植物是馬鞍藤，馬鞍藤屬於旋花科……</p>

* 前台結構（AA級 - 字幕）：

<video poster="{影片封面圖網址}" controls> <source src="{影片網址}" srclang="zh-Hant" type="video/mp4"> <track src="{中文字幕網址}" kind="descriptions" srclang="zh-Hant" label="繁體中文"></video>


---
🔗 [影片相關範例](https://codepen.io/judyshyu/pen/jOdqXjy)