Video Player

Create a web video player in which you can alter playback speed and skip forward/backward.

Task:

Implement a video player that can play an mp4 video. Add five buttons below the video player:

  • 1x, 1.5x, 2x: when clicked, it sets the playback speed to the displayed value on the button
  • -30s, +30s when clicked, it offsets the current time of the video by the displayed value

You can use HTML5 tags in the exercise, and you don’t have to worry about cross-browser compatibility.

As an example, you can use this video.

Make your solution extensible so that it will be easy to add more fully functional playback speed and offset buttons without changing anything in your JavaScript code.

Solution:

If you have never used the HTML5 video API, it’s time to google it. The video markup looks as follows:

Get hands-on with 1400+ tech skills courses.