# [JS30] Day.11 Custom HTML5 Video Player
###### tags: `JS30`
## 任務 Task
製作出播放影片的進度條、播放鈕、音量鍵、速度鍵、快進退鍵。

==完成時間：1hr==
## 步驟 Step
1. 依據各個按鍵做監聽，分別建立各個 `function`。
## 筆記 Note
### <font color=#337EA9>MediaElement.paused</font>
* 判斷影音是否為暫停，回傳布林值。
### <font color=#337EA9>CSS offsetX、offsetY</font>
* `Event` 屬性，指滑鼠到外層容器的距離，單位為 `px`。
### <font color=#337EA9>CSS flex-basis</font>
* 重新定義 `flexbox` 內方向的長度，`flex-direction = row` 為寬度，`flex-direction = column` 則為高度。
* 可以是長度，也可以是百分比。
<iframe height="300" style="width: 100%;" scrolling="no" title="flex-basis test" src="https://codepen.io/jim876633/embed/MWQdXMZ?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/MWQdXMZ">
flex-basis test</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 想法 Idea
:::warning
:bulb: <font color=black>新增全螢幕功能、自己做 control bar。
</font>
:::

<iframe height="300" style="width: 100%;" scrolling="no" title="Video controls" src="https://codepen.io/jim876633/embed/PoQrJKN?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/PoQrJKN">
Video controls</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### 方法 method

## 連結
[clientX | offsetX | screenX | pageX差別](https://code-question.com/developer-blog/get-the-mouse-position-distinguish-clientx-offsetx-screenx-pagex-in-the-event-object)
[Free video](https://mazwai.com/)