StriveCDN Blog Logo

HTML5 Video Player Comparison

Have you ever thought about why it is advantageous to use an HTML5 video player and which one suits you?

This blog article gives you the answer.

Foto von Lorcan Mozis

May 07 2018

Published by Lorcan Možiš

Stay In The Loop

Keywords

HTML5 Video Player

HTML5

Video Player

HTML5 Video Player Comparison

Have you ever thought about why it is advantageous to use an HTML5 video player and which one suits you? – Find the answer below!

Short introduction into HTML5

HTML (HyperText Markup Language) is a markup language for websites. The basic structure of a website is described with HTML and then interpreted and displayed by a web browser. The creator of a website writes the text of a web-page in an HTML file. The HTML file can be used to structure and format a text (e.g. font and font size). You can also link to other websites via HTML or add images and videos to your text. On October 28, 2014, the W3C (World Wide Web Consortium) presented the finished HTML5 specification.

As the successor to HTML4, it offers new functions such as video and audio support, local memory and dynamic 2D and 3D graphics that HTML4 could only display by installing plug-ins (e.g. Adobe Flash) rather than directly.

Flash vs. HTML5 and why switching to HTML5 was important

Flash is a proprietary product of Adobe, while HTML5 is an open standard. For example, Adobe has sole control over Flash, while HTML5 can be implemented by browser manufacturers. The dependence of a company is of course much riskier, as it could theoretically abolish its product from now on. A disadvantage of HTML5 is that HTML5 applications do not have to be displayed the same everywhere. The display of HTML5 depends on the browser and operating system used. With Flash, every project looks the same, because there is only one Flash Player that looks the same on every device.

A major shortcoming of Flash is security. Due to its widespread use, Flash is a popular target for hacker attacks, often requiring security vulnerabilities to be closed with updates.

A great supporter of the HTML5 initiative was Steve Jobs, who refused to install Flash technology on Apple mobile devices because he had too many security concerns. Which brings us to the biggest advantage of HTML5, the mobile representation. The trend is moving more and more towards mobile applications and away from the desktop. HTML5 is much more powerful than Flash and uses less battery power than Flash. HTML5 is available on every mobile device, while Flash is only directly available for Android devices. There is no official support for iOS.

These aspects make clear why switching from Flash to HTML5 was so important.

The most common browsers support HTML5 from the following versions

Requirements and features of an HTML5 video player

There are several requirements to use an HTML5 Video Player. An important feature is DRM. This ensures that only certain users, for example registered customers, can watch a video for a fee. DRM also guarantees the security of the video player. A good video player should of course also allow live streaming. If it does not, it is of no interest to our industry. Furthermore, a good live stream video player should have the ability to rewind and watch a certain part, for example, the last 30 minutes of a live stream, time-shifted and return to the live frame if necessary.

Other nice features are the support of 360 degrees and virtual reality (VR) videos.  The player should also be able to automatically recognize that the bandwidth is not sufficient to display the current video quality smoothly. If this is the case, the player should automatically continue to play the video in a lower resolution. This procedure is called AVR. Furthermore, it should be possible to customize the video player according to the own needs.

It can be distinguished which license the player has, the GPL license is widely used. In 2007, the third version was released (GNU GPLv3). The GPL license guarantees you to run, study, modify and distribute or copy the software. Software that grants these liberties is called Free Software (Open source Software). GPL is also subject to a copyleft. This means that all rights must be retained on disclosure.

Another criterion is the JavaScript library used. The default is usually jQuery. Every second website and 70% of the 10,000 most visited websites use jQuery as their JavaScript library.

Another important feature is Flash Fallback. As already mentioned in the introduction, HTML no longer needs plug-ins to play a video or audio file. If this should not work due to an error, the fallback intervenes to display the file with Flash as with HTML4.

For optimal user experience (UX) you should of course be able to watch a video as large as possible on the display used. Therefore it is recommended to use an HTML5 video player with a fullscreen function. Another aspect that falls under UX is the so-called keyboard interface. This means that the player also works via a keyboard control. An example of this would be pressing the space bar to pause a video and restart it by pressing it again.

Depending on how international the audience of a person or company offering video content is, a corresponding video player should also have a subtitle function. 

Free vs. paid HTML5 players

In order to produce appealing and high-quality videos, a relatively time-consuming but also costly expenditure of time is usually necessary. As a producer of this content, you have to consider whether you should choose a free or a paid video player. The advantage of a paid player is that you have more customization possibilities there and it’s usually possible to advertise your own products or collaborated products without restrictions, so you can increase your revenue easier. However, you also bear the risk of higher fixed costs, which you may not be able to cover in full at the beginning.

Whether you should choose a free, usually inflexible player or a paid custom solution depends on your situation and the goals you have set yourself.

Examples of different HTML5 video players

  • Free
  • JavaScript Library
  • Flash Fallback
  • Fullscreen Mode
  • Keyboard Interface
  • Subtitles
  • Paid - No price information
  • JavaScript Library: jQuery
  • Flash Fallback
  • Fullscreen Mode
  • Keyboard Interface
  • Subtitles
  • Paid - Starter: 5$/month, Business: 50$/month
  • JavaScript Library
  • Flash Fallback
  • iOS Support
  • Fullscreen Mode
  • Keyboard Interface
  • Subtitles
  • Paid - Small: 139$/month, Medium: 449$/month, Large: 1299$/month
  • JavaScript Library
  • Flash Fallback
  • Fullscreen Mode
  • Keyboard Interface
  • Subtitles

Video JS HTML5 Player

  • Free - GPL v3
  • JavaScript Library
  • Flash Fallback
  • iOS Support
  • Fullscreen Mode
  • Keyboard Interface
  • Subtitles

How to integrate a video player on your website

Including a video on a website has become very easy thanks to HTML5 compared to Flash. All you need is the video tag and its attributes. The code looks like this:

<video src = "yourVideo.mp4"
    width = 1920
    height = 1080
    controls
    poster = "yourImage.jpg">
</video>
  • src describes the source of the element with the URL to the video file
  • width and height customize the dimensions of the video
  • controls can be used to add options such as playback and volume to the video
  • poster defines a thumbnail that is displayed before the user plays the video

Further elements that can be inserted:

  • use autoplay to automatically play a video when the page on which the video is located is opened
  • use autobuffer to let the video load directly in the background before the user clicks on it to play it. This option makes sense, if it is clear that the user wants to watch the video in which he has explicitly navigated to this page, for example
  • use loop to ensure that a video is played again and again after it's over - this is of course not possible with live streaming

How to integrate the HTML5 video player Clappr on your website

In the head of the HTML script only one line of code has to be inserted:

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
</head>

After that you just have to create the player in the  HTML script’s body:

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
  </script>
</body>

Recap

Since HTML5 the integration of a video player on a website has become much easier, because no additional plug-ins have to be installed. The trend is also moving away from plug-ins and the range of HTML5 video players is growing. Finally you have to decide for yourself which features are important and whether you want a free solution with possibly smaller limitations or a paid solution with the risk of higher fixed costs but for example with the option to simply monetize videos for your projects.

This blog entry will not take the decision which HTML5 Video Player to use away from you, but we hope to be able to give you a good insight into the topic and help you making your decision. However, it should be noted that you should always prefer an HTML5 Video Player over a Flash player.

Which player do we use at Strive and why?

At Strive we use the Clappr Player, because it’s not only open source. It is one of the first HTML5 Video Players which was created by community as a GitHub project. The developers are constantly evolving the Video Player and provide easy API access. In addition, the integration of this player is extremely simple, as explained above, and the Clappr player has many user-friendly features.

Stay In The Loop

Subscribe to our awesome newsletter to be always up to date about our latest news.

Get Our Newsletter!

With our newsletter, you never miss any important information about our products, special offers and company news!

© 2018 – Strive Media GmbH