Cloudinary Blog

Ultimate HTML5 Video Player Showdown: 10 Players Compared

Ultimate HTML5 Video Player Showdown: 10 Players Compared

HTML5 is the latest HTML standard. It is bundled with numerous new elements and attributes that enhance semantics, connectivity, performance, device access, 2D and 3D graphics, and styling on the web.

Before HTML5, you could play videos only in a browser with plugins like Flash. HTML5 changed the game, elevating videos and audios to be first-class citizens on the web by enabling the manipulation of multimedia content with the <audio> and <video> tags.

Thanks to HTML5, you can now integrate browser-native video players in apps without third-party scripts or plugins. Below is a list of the browser versions that fully support the <video> tag.

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

In this post, we’ll dive deep into the popular HTML5 video players and highlight their strengths and weaknesses. You can then decide which HTML5 video player best suits your project.

Quick reference of popular HTML5 video players–

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.js.

Cloudinary Video Player

The Cloudinary Video Player, an HTML5 Video Player bundled with a multitude of capabilities, is analytics ready. Its key features are as follows:

  • Broad device support: The webview player works well in both desktop and mobile browsers on a wide range of devices.
  • Player controls: Built-in support is available for all standard player controls: play, pause, mute or unmute, volume control, loop, maximize or exit maximize, with an option for full customization.
  • Video manipulations: You can apply Cloudinary video transformations at the player level, which in turn applies to all the videos delivered in that player. You can also apply additional or override video transformations on a per-video basis.
  • Multiple players: Multiple players can play videos on the same page, each with different configuration settings or with different sources but the same configuration.
  • Formats: The player supports popular video formats, such as .mp4, .ogv, .webm, and .mov. You can specify multiple formats and the player would then automatically select the best format for the browser in which the video is playing.
  • Adaptive bitrate streaming: The player supports HTTP Live Streaming (HLS) and Dynamic Adaptive Streaming over HTTP (MPEG-DASH),automatically generating all the required streaming representations and supporting files.
  • Customization: You can customize the following in the Cloudinary Video Player:
    • Simple parameters that 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 Video.js API for low-level control or customization of any element of the player Furthermore, you can do the following:
  • Playlists: Pass a list of videos or automatically include all the videos that contain a specified tag. Additionally, you can display a Next Up thumbnail toward the end of each of the videos on the list.
  • Recommendations: Display a list of recommended videos when a video ends.
  • Analytics: Monitor how many users are viewing your video and when they do that, down to the level of any event that you choose (start, pause, watched-duration percentages, and others), and then pass the captured data to your Google Analytics account or other analytics trackers.
  • Video Ads: Monetize your content with ads. The player complies with the leading ad standards: Video Ad Serving Template (VAST), Video Player Ad-Serving Interface Definition (VPAID), and Video Multiple Ad Playlist (VMAP), as well as ads that are managed with Google’s DoubleClick and AdSense.
  • Video Transcoding: Integrate the player with Cloudinary’s video-transformation and optimization capabilities.
  • AI Features: Generate real-time, automatic transcripts, subtitles, categories, and tags.

Adding the Cloudinary Video Player to your page takes only one simple step: linking the player and JavaScript SDK files, like this:

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

Alternatively, install the player with npm and then link the files:

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" 

For details on the features described above, see this demo.

Cloudinary caters to all aspects of the video-management process: from upload to transcoding, to live streaming, and to digital-asset management. See this excellent article that explains how to do it all for your video projects.

Bottom line: Cloudinary is an end-to-end solution for all your video- and image-related needs, including upload, storage, administration, manipulation, optimization, and delivery. With Cloudinary, you can securely upload videos or other files at any scale from any source. Cloudinary also comes with an API for fast upload directly from your users’ browsers or mobile apps. For details on how to integrate Cloudinary in your apps, check out its documentation.

Video JS

Video JS is a free and open-source HTML5 video player built with JavaScript and CSS. As of this writing, Video JS runs on over 400,000 websites with more than 15,000 stars on Github. It supports Flash.

Flash technology is built into the project for versions that are lower than 6.0.0. If you are using the latest version of Video JS and need Flash support as fallback, join the videojs-flash project on Github.

A notable strength of Video JS, which supports playback on desktops and mobile devices, is that it’s skinnable. The player skin is built from HTML and CSS and you can customize your own skins. Here are the examples of two different skin implementations:


Netflix Video JS skin

To install the Video JS video player, first add the requisite CSS and JavaScript files from the CDN to the <head> element, as follows:

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

Afterwards, add the <video> tag to the body, for example:

  <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. Once the page loads, Video JS finds the element and automatically sets up a player for you.

Alternatively, do either of the following to install Video JS:

Fetch the required files from npm with the command line npm install Video.js.

  • Programmatically invoke the player, like this:
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 feature-rich and robust JW Player is an HTML5 video player that renders beautifully on desktop and mobile browsers. It’s also a video-hosting platform on which you can upload and stream 360-degree videos.

Currently, the JW Player, which is live on more than two million websites, supports the following:

  • 4K resolution
  • Adaptive bitrate streaming
  • Live streams
  • Monoscopic videos
  • Gyroscope motion
  • Customizable UI
  • 360-degree video playback in magic-window and immersive-VR modes with a premium license
  • Addition of the 360-degree, video-playback capability to native Android and iOS apps with JW Player VR SDK Beta
  • Digital Rights Management (DRM): Widevine, PlayReady, FairPlay, and ClearKey
  • Video-advertising standards: VAST, VPAID 1, VPAID 2, and Google Interactive Media Ads (IMA)


To install the JW video player, add the necessary JavaScript file and the key from your JW Player account to the <head> element, as follows:

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

Next, load the player by calling the jwplayer function, like this:

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

After setting up the player, you can programmatically call API methods on it. JW Player supports the event triggers on, off, once, and trigger. See this example:

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 Player instances on the same page as long as they have different IDs (id).

For details on the related APIs, check out the JW Player JavaScript API Reference documentation.


jPlayer is the HTML5 audio and video player for jQuery—basically, a jQuery plugin.

jPlayer supports the following:

  • Customizations, including changes of video skins with HTML and CSS
  • Flash: MP3, MP4 (AAC/H.264), Real-Time Messaging Protocol (RTMP), and Flash Video (FLV)
  • HTML 5: MP3, MP4 (AAC/H.264), OGG (Vorbis and Theora), WebM, and WAV

To install jPlayer, do so with bower on the command line:

bower install jplayer

Alternatively, use PHP’s composer:

composer require happyworm/jPlayer

JPlayer works on many browsers: IE6+, Android 2.3+, Firefox, Chrome, Safari, Opera, and Mobile Safari.


Flowplayer, an HTML5 video player, offers the following capabilities:

  • Support for AdSense and VAST advertising
  • Video hosting
  • Subtitles
  • Customizations, including skin changes
  • Publication of videos in bulk from the command line with the flowplayer utility

To install Flowplayer, type on the command line:

npm install flowplayer-api
cd flowplayer-api
make install

To upload videos in bulk with Flowplayer, type:

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

Efficient management of Videos

To use Flowplayer in your app, download the software, unzip it, and link the JavaScript and CSS files, as follows:

<!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">

MediaElement.js Player

The MediaElement.js Player is an HTML5 audio and video player that supports the following:

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

To install the player, fetch the necessary CSS and JavaScript files from the CDN, like this:

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

Alternatively, install from npm and reference the files:

npm install mediaelement

Next, set up the player in your app by adding the mejs__player class to a <video> tag:

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

To embed social-media videos, such as those on YouTube and Vimeo, add the <iframe> tag, for example:

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

Projekktor Player

The free and open-source Projekktor Player, another HTML5 video player, offers the following capabilities:

  • Preroll and postroll ads (VAST)
  • True full screen
  • Flash fallback with RTMP support
  • Support for the VLC web plugin
  • Quality selection and toggling
  • Cue points for media-synchronized events
  • Open Source Media Framework (OSMF) support for HTTP Dynamic Streaming (HDS) and digital video recorders (DVR)

The Projekktor Player is built on jQuery. Therefore, to integrate the player into your app, you must import jQuery and the required CSS and JavaScript files, as follows:

<!-- 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>

Afterwards, set up the player on a <video> tag by specifying the id parameter and invoking the projekktor function once the page loads:

<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

The Acorn Media Player is an HTML5 video player that focuses on accessibility. It offers the following capabilities:

  • Customizations, including skin changes
  • A buffering indicator
  • External SRT files for subtitles
  • Full keyboard access through standard tabs-based navigation and a screen reader

The player does not support closed captions.

Because the Acorn Media Player is a jQuery plugin, to add the player to your app, you must also incorporate jQuery, as follows:

<!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" />


To obtain the path to the core acornmediaplayer files, type bower install acornmediaplayer on the command line.

Kaltura Video Player

The Kaltura Video Player, another popular HTML5 video player, offers the following capabilities:

  • Fallback with Flash-based playback
  • Advertising and monetization
  • Video analytics
  • Subtitles
  • Full screen
  • Customizations, including skin changes
  • Touch interface
  • Android and iOS SDKs for mobile apps

This player requires the jQuery library. To install Kaltura on a server or in a cluster environment, follow the procedures in the official deployment guides.

As additional reference, see the Cross-Platform Video Player ToolKit on Github.

Accessible HTML5 Video Player by Paypal

The Accessible HTML5 Video Player for HTML5, developed by the Paypal Accessibility team, offers the following capabilities:

  • Captions through the VTT caption file
  • Internationalization of the text strings in the controls
  • Options for setting the number of seconds to rewind or forward
  • AccessibIlity for keyboard-only and screen-reader users

However, this player has the following limitations:

  • No support for SRT files
  • A minimum width of 360 pixels for the controls
  • No support for ads or ad networks
  • A limit of one caption file per video

Paypal HTML 5 Video Player

The two tables below give you, at a glance, a clear comparison of the features of the HTML5 video players described above and other players in the community. .

HTML5 Video Comparison Table

Comparison table


Videos on HTML5 are multimedia content on steroids for web browsers. Even though quite a few HTML5 video players are available on the web, not every player suits your project.

This post addresses the capabilities and limitations of the popular video players. In particular, Cloudinary stands out as an all-encompassing solution that can assist with your video-management needs by enabling 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 videos via a global CDN. Check out Cloudinary’s documentation for more information on how to integrate it into your apps.

I hope this post is of help to you in choosing the ideal HTML5 video player for your project. Do give Cloudinary a test drive to see how its features can render management of digital content simple, easy, and efficient. I’d appreciate your take afterwards, e.g., your favorite features and the related benefits, in the Comments section below.

Also, let me know if I missed any great HTML5 video players out there. Your feedback is always welcome.

Recent Blog Posts

Techniques for Image Enhancement With Cloudinary

Indisputably, visual presentations of events, places, people, and even intangible things make deeper impressions and linger in our minds for longer than words or any other communication medium, hence the meteoric rise through the ages of transmitting ideas and promoting brands in the business sector through images. The recent discovery of the first image of a black hole has generated calls for techniques for enhancing digital images. Specifically, the clamor is for quality-oriented tweaks that would result in optimal display and increased visibility of slightly hidden yet important content.

Read more
Video Manipulations and Delivery for Angular Video Apps

On social media, videos posted by users constitute a significant amount of the content appeal on those platforms. From upload to manipulation to delivery, a smooth, efficient, and effective pipeline for the posting process is mandatory to ensure consistent user sessions and their steadily increasing volume. However, building such an infrastructure is a complex, labor-intensive, and problem-prone undertaking.

Read more
Green Screen Queen: Dynamic Video Transparency Fit For Royalty

If you were reading your social media or news feeds on or around June 11 this year, no doubt you came across your fair share of posts about Queen Elizabeth and her outfit-color faux pas. For her 90th birthday, she chose a solid neon green suit, and it didn't take long for Photoshop fanatics to suggest alternative designs for the Queen's green-screen threads.

Read more
Content-Aware Automatic Cropping for Video

Delivering videos according to the aspect ratios defined by social media for multiple devices and platforms is a growing challenge. The continuously rising volume of vertical videos and the corresponding increase in video traffic on mobile devices (now up to 57% of online videos watched) have only exacerbated the situation, with no letup in sight.

Read more
Use a custom function in the image delivery pipeline

Cloudinary offers a wide array of image manipulations and effects to apply to images as part of our image-processing pipeline, helping to ensure that your images fit the graphic design of your website or mobile application. Cloudinary is an open platform, and you can use our APIs, Widgets and UI to build the media management flow that matches your needs.

Read more