Read up on media elements here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
- Hide the built in video controls
- Change the video to something you enjoy. Read up on encoding, because not all video formats can (or should) be put on the web
- Design your own controls. Have some fun with it.
- play/pause
- time elapsed
- time remaining
- progress bar
- mute/unmute
- fullscreen
- skip back 10 seconds
- Make the play/pause button actually alternate between play and pause, both visually and functionally.
- Make the mute/unmute button actually alternate between mute and unmute, both visually and functionally.
- Show an up-to-date time elapsed and time remaining
- Make a working progress bar (just the visual; making it draggable is very difficult)
- Add CSS or JS animation between the states of buttons (play to pause, mute to unmute, etc)
- Make the progress bar draggable, so users can jump to specific points in the video
- Make a list of links to important points in the video, like chapters, and have the links jump to those exact times