Cloudinary Blog

Ultimate HTML5 Video Player Showdown: 10 Players Compared

Ultimate HTML5 Video Player Showdown: 10 Players Compared

Today’s popular HTML5 video players are—

To help you pick from those 10 players the one that best suits your project, this post lists their strengths and, in a couple of cases, their weaknesses, affording you an in-depth and insightful comparison. Also described are the installation procedures for the players.

A side note: other well-received HTML5 video players, which are beyond the scope of this post, are Video for Everybody, HTML5 Media, jMediaElement ,OIPlayer, hVideo, jQuery Video Player, Moovie, Uppod, LeanBack Player, Open Standard Media (OSM) Player, HDW Player, Fluid Player, and amalia.js.

Cloudinary Video Player

Cloudinary Video Player, which is analytics ready, offers these key features:

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

<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js" 
    type="text/javascript"></script>

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" 
    type="text/javascript"></script>

For further reference, read the following:

Video JS

Free and open-source Video JS, a free and open-source HTML5 video player, which is developed with JavaScript and CSS, works well with Adobe Flash and supports playbacks on desktops and mobile devices. As of now, Video JS runs on over 400,000 websites with more than 25,000 stars on GitHub.

Note
Flash technology is built into Video JS 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 is that it’s skinnable. The player skin is built from HTML and CSS; you can create your own skins. Here are two examples of custom skins:

Green

See the Pen OGZ Video.js Skin by Joshua Riddle (@joshriddle) on CodePen.

Video JS Netflix skin

See the Pen Video.js Netflix Skin by benjipott (@benjipott) on CodePen.

To install Video JS:

  1. Add the requisite CSS and JavaScript files from the content delivery network (CDN) to the <head> element, as follows:

    <link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/5.11/video.min.js"></script>
  2. Add the <video> tag to the body, for example:

    <video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    <source src="//vjs.zencdn.net/v/oceans.ogv" 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="http://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
    </p>
    </video>

    Note
    Be sure to specify video-js as the value for the class parameter of the <video> tag. Once a page has loaded, Video JS reads that value and sets up Video JS for you.

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

  • Fetch the requisite files from npm with the command line npm install Video.js.
  • Programmatically invoke the player with this JavaScript code:
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.
  this.play();

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

JW Player

Feature-rich and robust JW Player, currently in use on over two million websites, works superbly on desktop and mobile browsers. It’s also a video-hosting platform on which you can upload and stream 360-degree videos.

JW Player supports the following:

  • 4K resolution
  • Adaptive bitrate streaming
  • Live streams
  • Monoscopic videos
  • Gyroscope motion
  • UI customization
  • 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 JW Player:

  • Add the requisite JavaScript file and the key from your JW Player account to the <head> element, as follows:

    <script src='https://content.jwplatform.com/libraries/L7fM8L0h.js'></script> <script>jwplayer.key='YOUR_KEY';</script> _Load from the head element._

  • Load the player by calling the jwplayer function, like this:

    <div id='myElement'>Loading the player . . .</div>
    <script type='text/javascript'>
    jwplayer("myElement").setup({
    "file": "/uploads/example.mp4",
    "image": "/uploads/example.jpg"
    });
    </script>

Afterwards, you can programmatically call API methods on JW Player, which works seamlessly with the event triggers on, off, once, and trigger. See this example:

<script>
jwplayer("myElement").on('complete', function(){
     alert("Playing is complete.");
});
</script>
_Listens on the complete event. Once the video finishes a playback, invokes the callback function._

You can also load multiple JW Player instances with different IDs (id) on the same webpage.

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

jPlayer

jPlayer is a jQuery plugin that functions as the HTML5 audio and video player for jQuery, working impeccably on many browsers: IE6+, Android 2.3+, Firefox, Chrome, Safari, Opera, and Mobile Safari.

jPlayer supports the following:

  • Customizations, including tweaks 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, type this bower command line:

bower install jplayer

Alternatively, install with PHP’s composer:

composer require happyworm/jPlayer

Flowplayer

Flowplayer offers the following capabilities:

  • Support for AdSense and Video Ad Serving Template (VAST) advertising
  • Video hosting
  • Subtitles
  • Customizations, including those for skins
  • 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 Flowplayer code, unzip it, and link the JavaScript and CSS files, as follows:

<!DOCTYPE html>
<head>
   <!-- flowplayer depends on jQuery 1.7.1+ (for now) -->
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

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

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

</head>

<body>

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

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

MediaElement.js

MediaElement.jssupports 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
  • Previews

To install MediaElement.js:

  1. Fetch the requisite CSS and JavaScript files from the CDN with this code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/mediaelement/latest/mediaelement-and-player.min.js"></script>
    <link href="https://cdn.jsdelivr.net/mediaelement/latest/mediaelementplayer.css" rel="stylesheet">
    </head>
  2. 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" />
    </video>

    Alternatively, install from npm and reference the files:

    npm install mediaelement

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="https://www.youtube.com/embed/frdj1zb9sMY?rel=0" frameborder="0" allowfullscreen></iframe>

Projekktor

Free and open-source Projekktor offers the following capabilities:

  • Preroll and postroll ads (VAST)
  • True full screen
  • Fallback option on Flash with RTMP support
  • Support for the VideoLAN Client (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)

Because Projekktor is built on jQuery, to integrate the player into your app, you must import jQuery and the requisite CSS and JavaScript files, as follows:

<!-- Load the player theme -->
    <link rel="stylesheet" href="themes/maccaco/projekktor.style.css" 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 Projekkor on a <video> tag by adding the id parameter and calling the projekktor function after a page has loaded:

….
body>
<video id="player_a" class="projekktor" poster="intro.png" title="this is projekktor" width="640" height="360" controls>
    <source src="http://www.projekktor.com/intro.ogv" type="video/ogg" />
    <source src="http://www.projekktor.com/intro.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
$(document).ready(function() {
    projekktor('#player_a', {
    volume: 0.8,
    playerFlashMP4: 'http://www.yourdomain.com/StrobeMediaPlayback.swf',
    playerFlashMP3: 'http://www.yourdomain.com/StrobeMediaPlayback.swf'
    });
});
</script> 
</body>
</html>

Acorn Media Player

Acorn Media Player, which focuses on accessibility, offers the following capabilities:

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

Note
Acorn Media Player does not support closed captions.

Because 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">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></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">
    <script>
    $(document).ready(function() {
        $('video').acornMediaPlayer();
    });
</script>
</head>
<body>

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

</body>
</html>

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

Kaltura Player

Kaltura Player offers the following capabilities:

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

Kaltura requires the jQuery library. To install Kaltura Player on a server or in a cluster environment, follow the procedures in the related documentation.

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

Accessible HTML5 Video Player by PayPal

Accessible HTML5 Video Player, developed by PayPal’s Accessibility team, offers the following capabilities:

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

This player has the following limitations:

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

PayPal HTML5 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 of several others in the community. .

Comparison of HTML5 Video Players
Source:http://videosws.praegnanz.de/

Comparison table
Source: http://html5video.org

Conclusion

Videos on HTML5 are multimedia content on steroids for web browsers. Even though quite a few HTML5 video players are available, not every player would meet your needs. I hope this post is of help to you in choosing the ideal HTML5 video player for your project.

Among the popular video players described in this post, Cloudinary stands out as an all-encompassing solution for managing, manipulating, optimizing, and delivering videos. Check out Cloudinary’s documentation for more information on how to integrate it into your apps and give it a test drive.

I’d appreciate your take afterwards, e.g., your favorite features and the related benefits, in the Comments section below. Also, do let me know if I missed any great HTML5 video players out there.


Further Reading on Video Manipulation

Recent Blog Posts

Converting Videos to GIFs in Kotlin-Based Android Apps

Among the image formats available today, Graphics Interchange Format (GIF) works for both static and animated images. A popular use of GIF images—commonly called GIFs—is to repeatedly loop motions, which you cannot in real life. Many people have turned themselves into online celebrities through effective application of GIFs.

Read more
Simple Steps to Make Your Site Accessible With Cloudinary

Web accessibility (a11y) is about gaining an insight into—

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can't use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.

Read more
Learn three ways in which to tell appealing stories on video.

Video storytelling is one of the most effective means of conveying messages to your audience. It’s also a popular marketing tool because most people are automatically drawn to video. In eCommerce, if accompanied by attractive images and a compelling narrative, video storytelling uniquely connect with potential customers without fail.

Read more