Skip to content

KatieLisabeth/Custom-HTML5-Video-Player

Repository files navigation

Custom-HTML5-Video-Player

A static web page built with only HTML, CSS & JavaScript. In this project we add cool features to our video player such as slowing it down of fast play and skip forward 25s or skipping back 10s

screenshot

Studying this project we learned about:

  • Using querySelector to access our classes inside of a parent < div >.
  • About video property paused.
  • Accessing dataset and wrapping it into parceFloat function to convert it into a true number.
  • How to loop through every single checkbox with forEach method.
  • How to update flex-basis value in progress_field with a function calculating percentage.
  • How to make 'mousedown' listen to an event if 'mousedown' is true will fire a scrub if it's false will do nothing.
  • How to make full screen to open by calling requestFullScreen method that requires specific prefixes to work in different browsers
  • How to make full screen close by exitFullscreen method that requires specific prefixes to work in different browsers

This code was well organized with development-strategy!

Please check it out by the following link projects