HTML5 Video Player Comparison

StriveCast Blog

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.

More features to consider

Other nice features are the support of 360 degrees and virtual reality (VR) videos.  The player should also 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 their 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 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 the 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 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 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

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>

Further elements that can be inserted:

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 make 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 StriveCast and why?

At StriveCast 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 the 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.

About StriveCast

StriveCast is a leading technology provider for eCDN solutions. Our WebRTC-based P2P mesh network is used by large companies like Swisscom, Siemens, Gazprom, and NEP group to solve the problem of network congestion during live events. Based in Germany, we are constantly improving and adapting our cutting-edge P2P technology in order to provide the next generation of enterprise video delivery. Today, StriveCast connects over 150,000 users worldwide on a daily basis, saving customers up to 95% of CDN traffic with a unique server-side-managed Peer-To-Peer network.

Are you currently comparing vendors? 

No agents!

Global scale

Silent test

Real-time analytics

Get in contact with our team

Email

General: info@strivecast.com
Request for Pricing: sales@strivecast.com
Partnerships: partners@strivecast.com

Phone

+49 210 333 78 155

Address

Strive Media GmbH
Erkrather Strasse 401
40231 Düsseldorf
Germany