Interactive Video
When this interactive video player is played, it synchronizes the video and the transcript using JavaScript and the Video API.
About the Project
The video is implemented with video.js using both MP4 and OGG video formats. As the video plays, the accompanying text is highlighted using JavaScript. When the transcript is clicked, the video jumps forward or back along its timeline.
The default colour of the media player skin was dark grey. I changed the colour of the player in CSS from its default to match the peach colour of the site.
What I Learned
I had never worked with video before. It was recommended we use the mediaelement.js library to implement the video but I struggled to make it work. It was then I decided to venture out and look for something that worked better for me but still included all the required features. I found video.js, worked with its documentation, and was able to get the video working and change the look to match my website.
With JavaScript, I learned about using IF statements with classList.add and classList.remove which became essential for making the transcript highlight along with the video.
Skills
- JavaScript
- Video.js
- MP4 and OGG video formats
- Manage API