Vanilla JavaScript HTML5 Video Player


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, YouTube has a quality box. And I want to use those JS code as a plugin. I didn't find ready-to-use code so I've written my own :)

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

Selecting video quality

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

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

  • volume - property for the current volume. You can get and set the volume from 0 to 1. The value has a float type. So if you want to set 50% of volume then you have to set 0.5.
  • duration - duration property of the video in seconds.
  • pause - method to pause the video.
  • paused - paused property.
  • play - play method. If a video was paused then it will continue playing from the current position.
  • progress - with this event, you can show 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 a current video position.
  • playbackRate - property of speed


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 changes the current position.