Video.js is a JavaScript and CSS library that let you create your own HTML5 video player
Video.js will replace Browser Native video player and let you customize almost everything such as skins and behaviour
Video.js is quite easy to setup. Let's start with going to the project page and download the files
Inside the zip, there will lots of files. Just unzip it in your web directory
I also put my test video ("testvideo1.mp4") and thumbnail in the same directory
Now here is my html file that I want to put my video on
First, just include the .js and .css files in the tag
Next, put the tag where you want your player to be with the same syntax of HTML5
Now if I just open this page via the browser, you'll only get a browser native HTML5 video player
This is Firefox video player. If you use Chrome or IE, it will be different
You will need to add couple more attribute to the tag in order to make the video.js works. First is "data-setup"
data-setup will allow you to specify the video player setting in JSON format
For example, to make the player display the video control bar, you can put "controls":true in the data-setup
it's the same as putting "controls" into the tag directly
Next thing we need to add is the "class", just add "video-js" to your tag class
And the second class would be the player skin. For now let's use the default skin which is "vjs-default-skin"
Now let's go back to the browser and refresh the page...
There! You can see that we're now using video.js player instead of native one
This player was made up with HTML5 structure, which means you can munipulate almost everything about it via CSS
Now, the last thing is there is a chance that user use the browser that did not supported or javascript was disabled.
We might need to add a message to tell the user for this case too
Just specify the text inside element with "vjs-no-js" class and that's it
(Oh I forgot that it needs to be inside the tag)
Thanks for watching. Subscribe if you like us :)