video.js – A free alternative
In the Tutorial “Setup a simple Video on Demand Server with nginx-rtmp” I used jwplayer as an example Video Player to be used on your Website. There are of course more alternatives like Flowplayer but recently I stumbled upon video.js which is a free HTML5 Video Player which you can use on your website.
Video on Demand (mp4,ogg,webm), RTMP and HLS Streams are supported as far as I could find out and the Player is used by sites like Vine, Twitpic or theOnion. And today I want to show you how easy it is to setup.
This said, I assume you have a webserver running and roughly know how to work with .js and .css files. If that is the case, simply go to www.videojs.com and download the latest player package. At the time of writing this its “video-js-4.12.7.zip”. For a start you can extract the zip file to your webserver and try to open the demo.html in your webserver. Make sure you extract the files to their own folder.
Let’s say your webserver is reached through www.mywebserver.com and you extracted everything to your root into a folder video-js for example the address to open would be “www.mywebserver.com/video-js/demo.html”. And you should be greeted by a white website showing the included example player. You can also try to playback the loaded video.
From now on the setup of course differs depending on which type of input you want to host. The demo.html already shows you an example on how to load a video so I will show you the few changes you need to make to load a rtmp stream instead.
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
The above code is used in the demo.html to load the example video. To change this to an rtmp stream we simply have to remove those three lines and replace them with the following:
<source src="rtmp://myrtmpserver:port/app/stream" type='rtmp/mp4' />
And thats it. But there are of course a lot more options. You can change the design of the player pretty much as far as your css knowledge goes. As mentioned you should also be able to use video.js on mobile phones with HLS. In this case the source would be something like this:
<source src="http://myserver:port/address/playlist.m3u8" type='application/x-mpegURL' />
So if you are looking for a web based video player in the future that is free. You might want to try out video.js!