---
# System prepended metadata

title: 影音元件
tags: [無障礙]

---

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

> [name=講師｜Judy Shyu]

# 🚩影音元件

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

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

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

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

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

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

![image](https://hackmd.io/_uploads/B18Mnyk86.png)


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

![image](https://hackmd.io/_uploads/SJTwhk18p.png)

![image](https://hackmd.io/_uploads/ryxu3yJLT.png)
