GitHub: https://github.com/Beginneraboutlife116/JS30-11-custom-play-controls

Live Page: https://beginneraboutlife116.github.io/JS30-11-custom-play-controls

What user can do?

• see the controls using the mouse to hover or focus on any button.
• Click the video to play or pause the video.
• Click the play or pause button to play or pause the video.
• Clicking the volume button could mute the video.
• A change in the volume slider could change the volume of the sound.
• Using the mouse wheel can change the volume of the sound.
• focus on the volume slider to use the keyboard to change the volume of the sound.
• see the current played time and the total time.
• Click on the setting button to see the adjustment of the playback rate.
• change the playback rate slider to change the speed of the playback
• Using the mouse wheel could change the speed of playback.
• drag in the progress bar to the desired time stamp.
• Press ArrowRight or ArrowLeft key to skip ahead video.
• Click the full-screen button to view in full-screen mode.
• escape the full-screen mode by ESC key

使用者可以做什麼？

• 滑鼠的移動或者是鍵盤的focus都可以看到控制項目
• 按下影片可以觸發播放與暫停
• 按下播放鍵可以播放，而在播放時候按下暫停鍵，能夠暫停
• 按下聲音鍵可以直接靜音
• 在聲音的音量控制上可以使用 slider 控制
• 利用滑鼠中間滾輪也可以調整 slider ，播放速度、音量都有支援此功能
• 當 slider 被鍵盤 focus 的時候也可以利用左右方向鍵做到調整
• 可以看到現在的播放時間以及總播放時間
• 滑鼠拉動播放時間條可以調整到想要的時間軸
• 使用左右方向鍵也可以調整目前的播放時間，可以看到類似 youtube 播放的動畫
• 按下設定按鈕可以看到播放速度的選項
• 按下全螢幕按鈕，可以進入全螢幕模式
• 按下 ESC 鍵可以離開全螢幕

Tech

• JavaScript
• HTML5
• SCSS