HTML5 Video Player

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:

• 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

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

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.

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.

Source:http://videosws.praegnanz.de/

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 is a Food Ninja, Open Source Advocate & Self-acclaimed Developer Evangelist.