The goal is to make a video player in ~1 week, with the classic characteristics of HTML5 video controls (play/pause, volume control, fullscreen, etc.) plus any bonus functionality I can think of. The player must be compatible with every HTML5-ready web browser.
I tried to make a player as simple as possible, with self-explanatory code and discreet animations.
- Controls bar: appears by default, when the video plays is disappears and reappear on video hovering.
- Play/pause button + clicking anywhere on the video triggers the same function as clicking on the button
- Volume button: clicking mutes/unmutes the video
- Volume slider: more precise control over volume.
- Fullscreen button: Sets the player fullscreen (player still buggy)
- Keyboard shortcuts: spacebar (play/pause), up/down (volume, still buggy), left/right (rewinf/forward), f (fullscreen), m (mute), 1-9 (time % shortcuts)
Roadmap and issues :
- Build a proper presentation page
- Have custom controls on fullscreen, instead of default browser controls
- Tune the timeline to have a cursor and some "wave" animation going on
- Add a quality selector (I had a nice idea for it, didn't had the time)
- Add a subtitles selector, with .srt files reading
- Add a "hint" button (with overlay bubbles hinting at keyboard shortcuts)
- Youtube Play/Pause Button animation
- Building custom controls for HTML5 videos
- Codepen - VolumeSlider by Robert Pataki
The video & song used for this demo is Cute Kittens Fly in Slow Motion to Hip Hop Dubstep - by ScottDW. All rights belong to them.