Vanilla JavaScript HTML5 Video Player

Prelude

You probably know a few libraries for rendering video in HTML5 style. Personally I know JWPlayer. But what if I need vanilla JS realization? I don't need jQuery. I just want pure JS code. And I want to use several quality source of video. For example as YouTube do have quality box. And I want to use those JS code like a plugin. I didn't find ready-to-use code so I've wrote my own :)

First of all if I want to initialize player with plugin-style, I should write a prototype for it.

Selecting video quality

What does it mean? It means that we just changing source of video-stream and setting current position. In fact we just have a several videos with different quality. They just are several files stored on your server. So when we want to choose another quality we are talking to browser that we want to load another source.

The video tag/element has several method to work with video:

  • volume - property for current volume. You can get and set volume from 0 to 1. The value has float type. So if you want to set 50% of volume then you have to set 0.5.
  • duration - duration property of video in seconds.
  • pause - method to pause the video.
  • paused - paused property.
  • play - play method. If video was paused then video will continue play from current position.
  • progress - with this event you can show user how much video stream size loaded.
  • loadstart - event will triggered when the source starts to load.
  • loadeddata - event will triggered when the source loaded.
  • timeupdate - with this event you can show progress bar to user for current video position.
  • playbackRate - property of speed

Conclusion

Based on this info you can create your own video player. Of course you can use ready-to-use plugin :) Also in the plugin I've added more code to handle video position with touches. So when you swipe left or right it change the current position.