I was very excited building custom HTML5 video player using vanilla JavaScript. Right now, I can say that it’s super tiring to rely on Web API alone without standing on the shoulders of giants (libraries).

The most interesting part in this challenge was adding event listener to events I’ve never heard before! Here’s the demo.

As usual, I can only let the code explain itself.

HTML

JavaScript

I wanted to display this video from repository (jekyll page asset), but it didn’t seem to work. I had tried embedding video file from Google Drive, but it only works well with iframe. I gave up, so I turned this lovely video into a gif and it worked (github page doesn’t allow video file maybe…).

Oh no more!

Enjoy the video, enjoy my spaghetti code. See you next time.