Site icon MonstersPost

7 Best HTML5 Video Players Optimized for the Web

Gilad David Maayan

HTML5, the latest HTML standard comes bundled with many new attributes and elements which help improve the semantics, performance, connectivity, 2D and 3D graphics, device access, as well as styling on the web.

Before HTML5, videos could only be played back on browsers with the help of plugins such as Flash. The development of HTML5 templates brought about a change and converted audio and video files into prime commodities on the web by allowing for the manipulation of multimedia content using <audio> and <video> tags.

With the advent of HTML5, users are now able to integrate browser-native video players within apps without the need to use third-party plugins or scripts. The following list contains browser versions that fully support the <video> tag.

  1. Google Chrome v4.0+
  2. Mozilla Firefox v3.5+
  3. Safari v4.0+
  4. Internet Explorer v9.0+
  5. Opera v10.5+

 

Video JS

An open-source, free HTML5 video player, Video JS is built using CSS and JavaScript. Video JS runs on more than 400,000 websites with an excess of 15,000 stars on Github. It comes with built-in support for Flash.

A key advantage of Video JS is that it is skinnable. The player skin is built using CSS and HTML and can be customized per the user’s preferences.

In order to install the Video JS video player, users first need to add the required JavaScript and CSS files from the CDN to the <head> element, as indicated below:

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

Once done, the < video > tag can be added to the body as shown below:

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

It is critical to ensure that a class of video-js is added to the <video> tag. After the page loads, Video JS locates the element and sets up a player for the user.

Cloudinary Video Player

The Cloudinary HTML5 Video Player comes with many capabilities and is analytics ready. Some of its key features include:

Apart from that, Cloudinary also supports customization. Users can customize the following aspects:

  1. Parameters that modify skin themes, display of titles and subtitles, and similar basic user preferences.
  2. Events that allow users to execute operations from interactive as well as passive and actions in the player.
  3. Access to the Video.js API to enable low-level control and customization of elements of the player.

JW Player

JW Player is a robust feature-rich HTML5 video player which renders perfectly on mobile and desktop browsers. A video-hosting platform, JW Player, allows users to upload as well as stream 360-degree videos.

The JW Player is now live on more than 2 million websites and supports the following features:

jPlayer

jPlayer is essentially a Query plugin that is used as an HTML5 video and audio player for jQuery. It supports the following:

To install jPlayer, you can use the following command line in your browser:

bower install jplayer

Alternatively, you can also use PHP’s composer:

composer require happyworm/jPlayer

JPlayer functions on a number of different browsers: Android 2.3+, Firefox, IE6+, Chrome, Opera Safari, and Mobile Safari.

Flowplayer

Flowplayer is an HTML5 video player that offers the following capabilities:

In order to install Flowplayer, use the following command line:

npm install flowplayer-api
cd flowplayer-api
make install

If you wish to upload videos in bulk using Flowplayer, you can use

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

To be able to use Flowplayer in an app, you can download this software and link the CSS and JavaScript as indicated below:

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

Projekktor Player

Another open-source and free HTML5 player is the Projekktor Player. This player has the following capabilities:

Projekktor Player is built using jQuery. Hence, to be able to integrate the player into an app, users would need to import jQuery and the required JavaScript and CSS files as shown below:

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

Once done, the player can be set up on a <video> tag after specifying the id parameter and including the projekktor function after the page loads:

<html>
<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 player that concentrates on accessibility. Acorn Media Player comes with the following capabilities:

Since the Acorn Media Player is essentially a jQuery plugin, to able to add the player to an app, users also need to include jQuery, as shown below:

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

What Can Go Wrong While Launching A Webiste? [Free Ebook]

By clicking the button you agree to the Privacy Policy and Terms and Conditions.

Conclusion

Although a number of different HTML5 video players are available for use today, it is likely that not all of them will be suitable for your purpose. The idea of this article is to jot down the capabilities and constraints of the more popular players in the market.

If you have any suggestions or if you think we’ve featured a good video player, please let us know in the comments.