Menu Icon Close
App Development

Comparing Various Web Video Players

Blog: Comparing Various Web Video Players
February 09, 2014
By aashu
Reading Time: 5 minutes

Web sites have been growing from a few static html pages with embedded images to interactive live portals.Along with this transition videos have become an integral part of websites, as evidenced by the success & popularity of video sharing sites like youtube , dailymotion , vimeo etc.. As more and more such sites compete for the users, embedded videos are becoming ever more popular. On simple way to include videos on your site would be to embed youtube video links. However if you are more adventurous and need more control you may want to host the videos on your site itself. Having built a complete video streaming platform we are going to post a series of blogs on the challenges of storing, streaming and playing videos. In this post I would compare various video players for their differences, strengths and weaknesses.
I have picked few popular web video players today and will evaluate them on some basic parameters.

VideoJS : http: //www.videojs.com/

The best part of using it is that VideoJS is Free! Setup Setting up VideoJS is fairly simple and as their site states, a 5 min task. Download the js (video.js) and css file, include it in head ( tag) of html or directly add the CDN (Content Delivery Network) reference in html.


VideoJS uses the HTML5 video tag to embed a video and provides some attributes which can be added in video tag.


Skinning Model Video Skin is the look and feel of the video player. VideoJS provides a default skin while custom skin can also be created using CSS. Playlist VideoJS does not provide in-built feature to create playlists but there are many independent plugin available which can be used with VideoJS to create playlists like https://github.com/cfx/videojs-playlist and https://github.com/tim-peterson/videojs-playlist etc. Player Playback Playback technology refers to the technology / plugin which browser uses to play video, which can be either HTML5 or Flash or some other technology.

 <video data - setup = '{"techOrder": ["html5", "flash", "other supported tech"]}'..

As per above tag, browser will try to use html5, in case html5 is not available, video will fallback to flash and then to some other technology. Analytics VideoJS does not provide in-built analytics tool or integration with Google analytics but it can be achieved using JS. Subtitles/Captions VideoJS supports subtitles in WebVTT format.Adding vtt file in track tag attaches subtitle text file.

 <video id = "example_video_1" class = "video-js vjs-default-skin"...

Support Since VideoJS is open source and free, it provides support only through forums.

Sublime Video: http://sublimevideo.net/

Sublime is probably the best looking player of the lot. It recently became free after becoming part of dailymotion. Setup To use sublime video, one needs to register at sublime video site. Once registered, sublime provides a unique code to access the sublime js. Something like:  


Sublime too uses video tag to embed video in page:  


Subtitles Sublime supports WebVTT (.vtt) as well as SubRip (.srt) file formats for subtitles    

 <video id="sublimeVideoId" ....

SD/HD Switching Sublime provides an in-built feature to switch the video quality between SD and HD. Keyboard Control Sublime gives in-built keyboard controls for the player to adjust the volume, play/pause the video etc. Custom Logo User can display a custom logo on video player instead of the sublime logo. But this feature is only available in paid versions. Adding data-logo-link-url attribute in video tag enables the user to give url of logo. Analytics Sublime provides in-built integration with Google Analytics. Videos can then be categorised by various events start/end of video, sharing the video etc. In order to track a video, a unique id should be provided to each video using data-uid attribute.
Social Sharing Sublime videos can be shared across different social networking sites using an in-built feature. Attribute data-sharing-url takes the url of the video (to access the video independently). Cue Zones An in-built feature of Sublime lets user to divide video in multiple cue zones which means that user can perform certain actions when he enters/exits the cue zone. It is essentially useful to insert advertisements, quiz etc. in-between video. Playlist In Sublime playlist can be created by accessing SublimeVideo object in js and adding videos using SublimeVideo.playlists() function. Streaming Protocols SublimeVideo only supports videos delivered through HTTP. WordPress It provides plugin to integrate SublimeVideo with WordPress site. Support Sublime provides product support through its own forums and support group.

JW Player : http://www.jwplayer.com/

Setup Registering at jw player site will generate a token and using that token jw player js can be included in html head tag.  


Unlike VideoJS and SublimeVideo which needs html5 video tag to embed player, jw player can be embedded in a plain div using jwplayer js object.

  
Loading the player… jwplayer(“myElement”).setup({ file: “/uploads/myVideo.mp4”, image: “/uploads/myPoster.jpg” });

Skinning Model JW Player provides 8 different flavors of skins but it comes only with licensed version. Along with that users can create custom skins as well. Custom Logo Licensed versions of JW Player provides the feature to display custom logo on video instead of jw player logo. Playlists An in-built feature to create playlist lets user to load multiple videos in single player instance. Playlists can contain one or more items and each item can have its own title and subtitles files attached. Apart from creating playlist directly in jwplayer instance, it can be loaded from RSS feed as well. Subtitles JW Player supports WebVTT, SRT and DFXP file formats for subtitles. It also provides inline styling of the captions to change the fonts, color etc. Analytics Along with integration of Google Analytics, jw player also provides its own analytics service. All the data is available on Analytics tab of the user’s jw player account.It is available in all the versions including free one.
Google Analytics can be included while setting up the player, as below:

 jwplayer("myElement").setup({ file: "/uploads/example.mp4", image: "/uploads/example.jpg", ga: { idstring: "title", trackingobject: "pageTracker" } });

Streaming Protocols JW Player supports streaming through both HTTP and RMTP, which essentially means that it provides a mechanism to use either html5 or flash as primary option and then fallback to another one if primary option is not supported by browser.
Social Sharing JW Player provides option to share video on different social networking sites like facebook, twitter etc. But this feature is available only in paid editions.
Advertising Advertisements are only supported in Enterprise edition.It supports VAST/PAID and Google IMA.
WordPress JW Player provides WordPress plugin to embed videos through WordPress directly. 
Support JW Player  provides product support through forums and support group, though support group is only available for licensed versions.

Flowplayer : http://www.flowplayer.org/

Setup To start with, flowplayer provides a js and css, which can be included in the html head. Since Flowplayer uses jquery for it javascript API, jquery should also be included.

 <link rel="stylesheet " href="http://releases.flowplayer.org/5.4.6/skin/minimalist.css"

Flowplayer uses html5 video tag to display play


Flowplayer provides a global configuration js object flowplayer.conf to set the path of flowplayer libraries, urls of custom logo used etc. Skinning Model
Flowplayer provides a good range of skinning for the player.It provides three types of css namely minimalist , functional and playful . Along with that user can override the defaults skins using custom css. Custom Logo Flowplayer supports the custom logo, which is available only in commercial version. Analytics Flowplayer provides in-built integration with Google Analytics. A unique analytics id should be associated with video to track and view usage data. Playlist Flowplayer has in-built support to create playlists.If analylicts is enables, each video in playlist is tracked separately.


Cuepoints Like SublimeVideo, Flowplayer also provides cuepoints to enable user to perform custom actions at pre-defined points. Subtitles Flowplayer supports WebVTT (.vtt) file format to enable subtitles on video. Unlike JW Player, Flowplayer does not provide any UI element to control subtitles, which means that if subtitle file is added in track tag, there is no way to disable it. Streaming Protocols Flowplayer supports streaming through RTMP and HTTP both. Social Sharing Flowplayer provides a separate plugin to share the video on different social networking sites like facebook, twitter etc. Advertisements Flowplayer supports Google AdSense to display advertisements in the video. AdSense plugin for Flowplayer must be loaded to user this feature.


Support
Flowplayer provides product support using forums and support tickets. Ticketing is only available in Commercial version.

Conclusion

If the videos are not the major part of the site or just to check out how embedded videos work, one can start with VideoJS, which is free and provide all the essential functionality. But to use advanced features, its better to settle for the commercial versions from any one of SublimeVideo, JW Player or Flowplayer.
Out of these three also JW Player has a vast user base being used by ESPN, AT&T, Stanford University and many more.

References

  1. Flow PLayer
  2. Sublime Video
  3. VideoJS
  4. JWPlayer
TAGS :

Invest in better
solutions today

Contact Us