Demo Interactive Video Player Here
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.
The purpose of this project was to get familiar with HTML5 Video API and Javascript interactivity.
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.
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.
- HTML5 Video API
- CSS3
- SVG
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.
- 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.