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

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

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

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:

Green*

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

Netflix VideoJS skin implement

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

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

 <link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
 <script src="//vjs.zencdn.net/5.11/video.min.js"></script>

..that should exist in the head element.

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

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

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

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:

<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 Players on the same page, as long as they have different ids.

Check out the full JavaScript API reference here.

jPlayer

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

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

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

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

<iframe class="mejs__player" width="640" height="360" src="https://www.youtube.com/embed/frdj1zb9sMY?rel=0" frameborder="0" allowfullscreen></iframe>

Projekktor

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

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:

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

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

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
Source:http://videosws.praegnanz.de/

Comparison table
Source: http://html5video.org

Conclusion

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

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind?

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Read more
Shortening the Development Cycle of Media-Related apps with Cloudinary

Currently, the Android platform boasts the highest demand for mobile solutions, as evidenced by Google’s announcement in 2017 that there were two billion monthly active Android devices, a number that is likely to increase in the years ahead. For app developers like you, now is the right time to build and release solutions for Android. you might have also noticed that a higher percentage of apps being developed nowadays are filled with visual media: images and videos.

Read more
Build Your Own Image Storyboard Android App

Globally, approximately two billion people now own smartphones, which also feature cameras capable of capturing photos and videos of a tonal richness and quality unimaginable even five years ago. Until recently, those cameras behaved mostly as optical sensors, catching light that determines the resulting image's pixels. The next generation of cameras, however, can blend hardware and computer-vision algorithms that apply to an image's semantic content, spawning creative mobile photo and video apps.

Read more
Cloudinary Delivers Simplified Image Management Workflow for Fairfax Media's Digital Transformation

Fairfax Media Limited [ASX:FXJ] is one of the largest media companies in Australia and New Zealand that engages audiences and communities via print and digital media. It includes recognizable mastheads including The Australian Financial Review, The Sydney Morning Herald and The Age. Fairfax Media operates numerous news and information websites, as well as tablet and smartphone apps, for online news sites.

Read more
Bleacher Report Scores with Real-Time Video Highlights Delivered by Cloudinary

Bleacher Report is a global digital destination for sports fans, creating and collaborating on content at the intersection of sports and culture. Owned by Turner, a division of Time Warner, Bleacher Report's website and social channels focus on sports culture for the next generation of fans. Bleacher Report also has a five-star mobile app and popular email newsletters, which are part of the company’s strategy for instantly delivering in-depth articles, results and video highlights personalized for users’ favorite teams, players and leagues.

Read more