Interactive Video Player

Demo Interactive Video Player Here

Summary

Interactive Video Player is HTML 5 video player built from scratch using HTML5 Video API , CSS , Javascript along with some SVG for the video controls.

Motivation

The purpose of this project was to get familiar with HTML5 Video API and Javascript interactivity.

Getting Started

Click the demo link or clone/download the repository on your local machine and open the index.html file with a browser. Click the transcript below the video to see how the media playback time changes or vice-versa.

Thoughts

At first, I thought of doing this project with the help of media.js plugin which would cut down the project time to half but I thought of implementing without the use of any plugin. Styling the controls at different media breakpoints was surprisingly very challenging. I pushed myself to do this project without a library/plugin to enhance my javascript skills.

Built With

• HTML5 Video API
• CSS3
• SVG

Features

1. Responsive Design

2. Compatible on Chrome 68.0.3440.106 and Firefox 62.0 (64-bit)

3. As the media playback time changes, sentences in the transcript gets highlighted.

4. With clicks on any sentence in the transcript the video player jumps to the appropriate time in the video.

Coming Soon

• Add more video controls like skip-back, skip-forward and settings to change different language captions on the video .
• Add keyboard controls for play and pause functionality on the video.