Cloudinary Blog

A Comparison of HTML5 Video Players

A Comparison of HTML5 Video Players

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="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 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.

Note
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:

Green

http://codepen.io/joshriddle/pen/ZpAZjk

Netflix Video JS skin

https://codepen.io/benjipott/pen/JELELN

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="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
 <script src="//vjs.zencdn.net/5.11/video.min.js"></script>

Afterwards, 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>

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.
  this.play();

  // 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='https://content.jwplatform.com/libraries/L7fM8L0h.js'></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'>
  jwplayer("myElement").setup({
    "file": "/uploads/example.mp4",
    "image": "/uploads/example.jpg"
  });
</script>

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:

<script>
jwplayer("myElement").on('complete', function(){
     alert("Complete fired - Your content has completed!");
});
</script>
_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

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

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

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

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 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/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 the player on a <video> tag by specifying the id parameter and invoking the projekktor function once the page loads:

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

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

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

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

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more