# JS30 - Custom HTML5 Video Player

- 共筆：[JS30 我要成為 JavaScript 大師 - Day11](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?both#0715-%E5%9B%9B-2100%EF%BC%8CDay11-Didi-%EF%BC%8830%E5%88%86%E9%90%98%EF%BC%89)
- Demo：[JS30 - Custom HTML5 Video Player](https://codepen.io/dadidi910/pen/xxdgJZG)

> By Didi

---

## 課程重點：

了解 video 物件，客製化一個影片播放器。

[我們先來看看今天要做什麼東西！](https://kevin10410.github.io/Javascript30/11%20-%20Custom%20Video%20Player/index.html) 👉

---

先來看一下 HTML & Get Our Elements 💻

---

如何==播放影片==？

使影片播放或暫停，
並同時將播放鈕改為暫停或播放的圖示。 👉

---

等等帶你認識
HTML Audio/Video DOM Property
[paused](https://www.w3schools.com/tags/av_prop_paused.asp) 👉

---

HTML Audio/Video DOM Method
[play()](https://www.w3schools.com/tags/av_met_play.asp)、[pause()](https://www.w3schools.com/tags/av_met_pause.asp) 💻

---

按下播放鍵後...
1. 進度條要怎麼開始跑呢？

2. 要如何手動調整進度條呢？

3. 進度條往前/往後 skip 跳跳跳跳！ 👉

---

等等帶你認識
[HTML DOM Event](https://www.w3schools.com/jsref/dom_obj_event.asp)
timeupdate、mousedown、mouseup、mousemove、offsetX 👉

---

HTML Audio/Video DOM Property
[currentTime](https://www.w3schools.com/tags/av_prop_currenttime.asp)、[duration](https://www.w3schools.com/tags/av_prop_duration.asp) 👉

---

HTML Element
[style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)、[dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) 👉

---

HTML DOM Property
[offsetWidth](https://www.w3schools.com/jsref/prop_element_offsetwidth.asp)

大家都知道這些是什麼鬼東東嗎？ 💻

---

如何==調節音量==與==變換速度==？

點擊或滑動音量/速度條來改變 👉

---

等等帶你認識
[HTML <input type="range">](https://www.w3schools.com/tags/att_input_type_range.asp)
HTML Audio/Video DOM Property
[volume](https://www.w3schools.com/tags/av_prop_volume.asp)、[playbackRate](https://www.w3schools.com/tags/av_prop_volume.asp) 💻

---

這堂課就先到這裡囉！感～謝～大～家～（熊鬍立