Cloudinary Blog

HTML5 Video Player

HTML5 Video Player Comparison

HTML5 is the latest evolution of the HTML standard. It is bundled with a lot of new elements and attributes that makes semantics, connectivity, performance, device access, 2D/3D graphics and styling better on the web.

Before HTML5, videos could only be played in a browser with plugins like Flash. HTML 5 changed the game, making video and audio first-class citizens on the web by enabling the manipulation of multimedia content using the <audio> and video tags.

With HTML 5, users can now get browser-native video players without involving any third-party scripts or plugins. Below is a list of the browser versions that fully supports the <video> element tag.

  • Google Chrome v4.0+
  • Internet Explorer v9.0+
  • Mozilla Firefox v3.5+
  • Safari v4.0+
  • Opera v10.5+

In this blog post, we’ll take a deep dive into some of the popular HTML5 video players and specifically highlight their strengths and weaknesses. You have the right to know which HTML5 video player is better suited for your project.

The popular HTML5 video players include:

  • Cloudinary Video Player
  • VideoJS
  • JW Player
  • J Player
  • Flow Player
  • Mediaelement.js
  • Flare Video
  • Projekktor
  • Acorn Media Player
  • Kaltura Video Player
  • Accessible HTML5 Video Player by Paypal

Other notable HTML5 video players are Video For Everybody, HTML5 Media, JMediaelement, OIPlayer, HVideo, jQuery video player, Moovie, Uppod, LeanBack, OSM Player, HDW Player, Fluid player and Amalia

Cloudinary Video Player

The Cloudinary Video Player is a HTML5 Video Player bundled with a plethora of functionalities and is analytics-ready. The Video player provides the following:

  • Broad device support: The webview player is designed for both desktop and mobile web browsers on a wide range of devices.
  • Player controls: Built-in support of all standard player controls: play, pause, mute/unmute, volume control, loop, maximize/exit maximize, with the option for full customization.
  • Video manipulations: Apply Cloudinary video transformations at the player level that will apply to all videos delivered in that player. Apply additional or override video transformations at the per-video level.
  • Multiple players: Include multiple players on the same page, each with different configuration settings, or with different sources and the same configuration.
  • Formats: Supports popular video formats, such as .mp4, .ogv, .webm, .mov. You can specify multiple formats and the player automatically selects the best format for the browser where it's playing.
  • Adaptive bitrate streaming: Full support for HLS and MPEG-DASH including automatic generation of all required streaming representations and supporting files.
  • Customization:
    • Simple parameters to adjust skin themes, display of titles and subtitles and other basic player preferences
    • Events that enable you to trigger operations based on both passive and interactive actions that occur in your player.
    • Access to the underlying VideoJS API for low-level control or customization of any element of the player.
  • Playlists: Pass a list of videos or automatically include all videos that have a specified tag. Display a Next up thumbnail towards the end of each video in the list.
  • Recommendations: Display recommended videos when a video ends.
  • Analytics: Monitor how many users are viewing your video and when, down to the level of any events you choose (start, pause, watched duration percentages, and more) and then pass the captured data to your Google Analytics account or other analytics trackers.

Adding the Cloudinary Video Player to your page is as simple as linking the Video Player and JavaScript SDK files like so:

<link href="" rel="stylesheet">
<script src="" type="text/javascript"></script>
<script src="" 

Or installing via npm and linking the files like so:

npm install lodash cloudinary-core cloudinary-video-player
<link href="node_modules/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
<script src="node_modules/lodash/lodash.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-video-player/dist/cld-video-player.min.js" 

Check out the full implementation of the various features mentioned above on our Demo page.

You need a complete video solution for your next project? Catering for all aspects of your video management process from upload to transcoding, live streaming and digital asset management, check out this excellent article that explains how to do it all.

Cloudinary is an end-to-end solution for all your video and image-related needs including upload, storage, administration, manipulation, optimization and delivery. It allows you securely upload videos or any other file at any scale from any source. Cloudinary also provides an API for fast upload directly from your users’ browsers or mobile apps. Check out Cloudinary’s documentation for more information on how to integrate it in your apps.


VideoJS is a free and open-source HTML5 video player built with JavaScript and CSS. It is used on more than 400,000 websites. As at this writing, it has more than 15,000 stars on Github. It supports Flash.

Note: Flash technology is built into the project for versions less than 6.0.0. If you are using the latest version of VideoJS and you need flash support for fallback, then you also need to involve the videojs-flash project.

VideoJS supports playback on desktops and mobile devices. It is skinnable. The player skin is built from HTML and CSS, so you can build your own skins. Here are some examples of different skin implementations:


Netflix VideoJS skin implement

You can use a VideoJS HTML5 video player by simply including the necessary CSS and JS files from the CDN like so:

 <link href="//" rel="stylesheet">
 <script src="//"></script>

..that should exist in the head element.

Then in the body you can use the <video> tag like so:

  <source src="//" type="video/mp4"></source>
  <source src="//" type="video/webm"></source>
  <source src="//" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="" target="_blank">
      supports HTML5 video

Be sure to add a class of video-js to the video tag in your HTML. Once the page loads, VideoJS will find the element and automatically set up a player.

Note: You can also fetch these files from npm like so npm install Video.js.

You can also programmatically invoke it like so:

var options = {};

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.;

  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');

JW Player

The JW Player is an HTML5 video player that renders beautifully on desktop and mobile browsers. The JW Player is a video player that provides a lot of functionalities. The HTML5 video player boasts of a video hosting platform that offers the ability to upload and stream 360 degrees video.

Currently, the JW Player is live on more than 2 million websites.

The JW Player supports the following:

  • 4K resolution
  • Adaptive bitrate streaming
  • Live streams
  • Monoscopic video support
  • Gyroscope motion support
  • Customizable UI
  • 360 degree video playback in magic window mode and immersive VR mode with a premium license.
  • Adding 360 degree video playback to native Android and iOs apps using JW Player VR SDK Beta.
  • Widevine, Playready, Fairplay and ClearKey DRM
  • Video advertising standards, VAST, VPAID 1, VPAID 2 and Google IMA

This video player is the most feature-filled player in this list. It’s a very robust HTML5 player.

You can use a JW video player by simply including the necessary js file and including your KEY from your JW Player account like so:

<script src=''></script> <script>jwplayer.key='YOUR_KEY';</script> _this should be loaded from the head_

And loading the player by using the jwplayer function like so:

<div id='myElement'>Loading the player...</div>
<script type='text/javascript'>
    "file": "/uploads/example.mp4",
    "image": "/uploads/example.jpg"

Once the player has been set up, you can programmatically call API methods on it. JW Player supports the following event triggers: on, off, once and trigger. An example is this:

jwplayer("myElement").on('complete', function(){
     alert("Complete fired - Your content has completed!");
_Listens on the complete event. Once the video finishes a playback, it invokes the callback function_

You can also load multiple JW Players on the same page, as long as they have different ids.

Check out the full JavaScript API reference here.


This is the HTML5 audio and video player for jQuery. It’s basically a jQuery plugin.

jPlayer supports the following:

  • Customizable and skinnable using HTML and CSS
  • Flash: MP3, MP4 (AAC/H.264), RTMP, FLV
  • For HTML 5: MP3, MP4 (AAC/H.264), ogg(Vorbis/Theora), WebM, WAV

When implementing the jPlayer, you have to install it via bower like so:

bower install jplayer

..or you can use PHP’s composer like so:

composer require happyworm/jPlayer

JPlayer supports the following platform: IE6+, Android 2.3+, Firefox, Chrome, Safari, Opera, Mobile Safari.

Flow Player

The Flow Player is an HTML5 video player that supports the following:

  • Adsense and VAST advertising
  • Video hosting
  • Subtitles
  • Customisable and skinnable
  • Publishing videos in bulk from the command line with the flowplayer utility tool.
npm install flowplayer-api
cd flowplayer-api
make install

Installing the tool

flowplayer -U <username> -P <password> videos/*.mov

Using the tool to bulk upload

Efficient management of Videos

You can use Flowplayer in your application by downloading the software, unzipping it and linking the JS and CSS files like so:

<!DOCTYPE html>
   <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
   <script type="text/javascript" src="//"></script>

   <!-- flowplayer.js -->
   <script type="text/javascript" src="flowplayer.min.js"></script>

   <!-- player styling -->
   <link rel="stylesheet" type="text/css" href="flowplayer/minimalist.css">



   <!-- player 1 -->
   <div class="flowplayer">
      <video src="my-video.mp4"></video>

   <!-- player 2 -->
   <div class="flowplayer">
         <source type="video/webm" src="my-video2.webm">
         <source type="video/mp4" src="my-video2.mp4">


This is an HTML5 audio and video player that supports the following:

  • Streaming of HLS, M(PEG)-DASH, and RTMP content
  • Consistent feel for several type of media files (MP4, WebM, MP3, FLV)
  • Embedding of YouTube, Vimeo, Twitch, Dailymotion, Facebook and Soundcloud videos
  • Advertising
  • Preview

You can use Mediaelement HTML5 video player by fetching the necessary CSS and JS files either from the CDN like so:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <script src=""></script>
    <link href="" rel="stylesheet">

Or by installing from npm and referencing the files like so:

npm install mediaelement

Then setup the player in your app by adding the mejs__player class to a video tag like so:

<video class="mejs__player">
    <source src="/path/to/video.mp4" />

For embeddable social media videos like YoutTube, Vimeo etc, you can do it like so:

<iframe class="mejs__player" width="640" height="360" src="" frameborder="0" allowfullscreen></iframe>


This free and open source HTML5 video player supports the following features:

  • Pre- and post-roll Ads (VAST)
  • True fullscreen
  • Flash fallback with RTMP support
  • VLC web plugin support
  • Quality selection and toggling
  • Cue-points for media synced events
  • OSMF support for HDS streaming and DVR

It’s built on jQuery. Therefore you need to import jQuery when trying to implement Projekktor HTML5 Video player in your application and also import the necessary CSS and JS files like so:

<!-- Load player theme -->
    <link rel="stylesheet" href="themes/maccaco/" type="text/css" media="screen" />

    <!-- Load jquery -->
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

    <!-- load projekktor -->
   <script type="text/javascript" src="projekktor.min.js"></script>

Now, set it up on a <video> element like so by adding and id and invoking the projekktor function once the page loads like so:

<video id="player_a" class="projekktor" poster="intro.png" title="this is projekktor" width="640" height="360" controls>
    <source src="" type="video/ogg" />
    <source src="" type="video/mp4" />

<script type="text/javascript">
$(document).ready(function() {
    projekktor('#player_a', {
    volume: 0.8,
    playerFlashMP4: '',
    playerFlashMP3: ''

Acorn Media Player

This HTML5 video player was built with focus on accessibility. It supports the following:

  • Customization and skinning
  • Buffering indicator
  • External SRT files for subtitles
  • Full keyboard access using standard tab-based navigation and screen reader

Unfortunately, there is no native support for closed captioning.

You have to include jQuery when implementing the player in your application. It’s a jQuery plugin. So you’ll implement it like so:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <script src=""></script>
    <script src="/path/to/jquery.acornmediaplayer.js"></script>
    <link href="/path/to/acornmediaplayer.base.css" rel="stylesheet" type="text/css">
    <link href="/path/to/themes/acorn.theme.css" rel="stylesheet" type="text/css">
    $(document).ready(function() {

    <source src="/path/to/video.mp4" />


The path to the core acornmediaplayer files can be fetched from *bower with bower installacornmediaplayer`.

Kaltura Video Player

This HTML5 video player supports the following:

  • Fallback with Flash-based playback
  • Advertising and monetization
  • Video analytics
  • Subtitles
  • Fullscreen
  • Customizing and skinning
  • Touch interface
  • Android and iOs SDKs for use in mobile applications

It requires the jQuery library. There are official deployment packages to install Kaltura on a server or cluster environments.

The Cross Platform Video player toolkit and installation instructions are on Github

Accessible HTML5 Video Player by Paypal

This HTML 5 video player was developed by the Paypal Accessibility team. It supports the following features:

  • Captions, using the VTT caption file
  • Internalization of the text strings used for the controls
  • Option provided to set the number of seconds to rewind and forward
  • AccessibIlity for keyboard-only and screen reader users.

Unfortunately, it has the following limitations:

  • No support for SRT files.
  • Controls have a minimum width of 360px
  • No support for ads or ad networks
  • Only one caption file per video is supported.

Paypal HTML 5 Video Player

A better and clearer way to view the features these HTML5 video players possess is via a clear-cut comparison table. Take a good look at the table below comparing the video players highlighted above and other video players in the community.

HTML5 Video Comparison Table

Comparison table


Video on HTML5 is multimedia content on steroids for web browsers. There are several HTML5 video players available on the Open Web, but not every player will suit your project use case.

Here, we have covered the capabilities and limitations of these video players. Cloudinary, an end-to-end solution, can assist with all of your video management needs. Cloudinary enables you to upload and transcode videos, resize and crop them for responsive design, apply effects and filters, create thumbnails, add captions and overlays, optimize playback and deliver them via a global CDN. Check out Cloudinary’s documentation for more information on how to integrate it in your apps.

I hope our comparison guides you in choosing the right HTML5 video player for your next project and that you give Cloudinary a test drive in to see how all of its feature and functionality can make video easier to manage. Let me know in the comments section if there are great HTML5 video players out there that I omitted. And after using Cloudinary, let us know your favorite features and the benefits you were able to derive from it.

Prosper Otemuyiwa Prosper Otemuyiwa is a Food Ninja, Open Source Advocate & Self-acclaimed Developer Evangelist.

Recent Blog Posts

Google Analytics Video Tracking Made Simple

Most web analytics only look at page interactions. But what happens when the major content on your page is a video. You want to know when and how long your users are interacting with your media, when they paused to take a closer look at your media content and when they skipped some content because it wasn’t relevant to them. These - along with a lot of other reasons - are why you should not only analyze open/visits rates, but also drill down in the media content.

Read more
Give your mobile app a boost: pre-upload image processing

As a mobile developer, enabling users to upload images and share them with other users is a very common requirement. When developing those capabilities, we need to take into account that most users won't think twice about uploading the massive images that their high-resolution mobile cameras capture. Those huge files are not only overkill for on-screen display, but can also cause significant slow downs in upload and delivery times. And of course those same users wouldn't think twice about complaining or abandoning our app if their overall user experience wasn't smooth and fast.

Read more
Cloudinary Helps Hinge Keep Modern Romance Real

To create a profile, Hinge users initially had to connect their Facebook and/or Instagram accounts to the app, which would import images to the users’ Hinge profiles. Hinge stored those images with a URL that expired after two months, unless the user logged into the app regularly. This aspect of the app was frustrating for users because the photos would become inaccessible for others to view.

Read more
Building a Smart AI Image Search Tool Using React

In our first article, we built a part of the front-end of our image search tool with the focus mainly on the parent App.js stateful component.

In this article - part two of a series - we will continue developing a Smart Search App, in which users can search for content in an image, not just the description. The app is built with React for UI interaction, Cloudinary for image upload and management and Algolia for search.

Read more