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

10 Website Videos Mistakes and How to Solve Them

It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.

With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.

Read more
Android Data Saver: Optimizing Mobile Data Usage with Cloudinary

Over the life of a mobile device, the cost of a cellular data plan often exceeds that of the device itself. To optimize data usage and purge useless data on their mobile devices, users can enable Data Saver from Android 7.0 (API level 24). To do so, users toggle Data Saver in quick settings under the Notification shade or under Settings > Data usage. With Data Saver enabled, apps that aren't whitelisted cannot use cellular data in the background. They are also directed to consume less data while active.

Read more
Introducing the Cloudinary Upload Widget v2

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals. Cloudinary is an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation, optimization and dynamic delivery.

Read more
Convert an Image to a 3D Canvas With Cloudinary

This post was cowritten with Daniel Mendoza.
This post was cowritten with Daniel Mendoza.

Famed American poet Henry David Thoreau once said, “This world is but a canvas to our imagination.” And, like your imagination, the transformations you can apply to images with Cloudinary are practically endless. You can even render any flat image to appear three-dimensional and framed on a canvas.

Read more
Mobile Optimization: Optimize Your Mobile-Web User Experience


We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with your mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance, but also upping your SEO game and boosting customer experience.

Read more