VidTech

11 Things Your HTML5 Web Player Must Have!

Tristan Boyd
. 7 min read
11 things you HTML5 Player must have

11 things you HTML5 Player must have
The online video industry is enjoying a massive boom, but as demand for content is increasing, so too is the demand for quality and accessibility. Users expect video wherever they are, whenever they feel like it and on whichever device they happen to be using at the time.

The Video Player is one of the most important parts of your content delivery chain. It is critical that your player is ready to meet every single challenge that your users throw at it.

This is a list of 10 things you should check before deciding which player to integrate into your video infrastructure.


1. Is it cross-browser compatible?

HTML5 video browser supportPerhaps the most important item on this list is browser compatibility and HTML5 video browser support. There are many different browsers, running on a variety of operating systems and devices. The interface between your users and your content is the player. You need to be sure that you are using a player designed to work on every browser.
To achieve true cross browser compatibility the player will need to play more than just one type of adaptive stream. The two most popular formats are HLS and MPEG-DASH. By encoding your content to both of those standards you can cover all browsers, so it is very important that your player can play both.

2. Does it Rely on third party plugins?

Many video players rely on users to install third party plugins such as Flash or Silverlight to play their content. This is definitely to be avoided! As HTML5 becomes more widely supported, most of the major browsers are moving to a pure HTML5 solution, and your player should definitely be built with this in mind. However, because there are still some cases where Flash is the only option, the player should also provide a fallback solution for legacy devices.
It looks quite certain that the future of online video is HTML5, so it is highly recommended to use an HTML5 Video Player from the start.
Read this post to learn more about the movement towards a plugin free video industry and the replacement of Flash.

3. Which formats does the player support?

Playing video on any browser is more than just finding the right player. As mentioned in the first point, to play video in all browsers on all devices it is necessary to have at least two types of content ready. HLS for iOS devices and MPEG-DASH for pretty much everything else. But just playing the video is nowhere near enough. Every point that I have listed in this article needs to be supported across both formats to guarantee that you do not box yourself into a corner by choosing a player with limitations.
Supporting both of these formats requires a player that is kept up to date. As we have just seen with Apples recent announcement that HLS now supports fragmented MP4, things are constantly changing, so you need to ensure that your player not only supports the two major formats, but will continue to upgrade it’s support as standards change.
More information on encoding for MPEG DASH and HLS.

4. How well does it avoid buffering?

buffering4The main job of an adaptive streaming player is to ensure that the video plays at the highest possible quality. As bandwidth conditions change the player needs to adjust the stream to avoid the video pausing while the buffer is loaded (“buffering”). The “adaption logic” is the set of rules that the player uses to make these adjustments.
Read more about setting up an adaptive bitrate streaming workflow.
Different players use different logic, and some are much better than others. Some players measure the speed at which each segment is being downloaded, while others measure the size of the buffer (the video that has already downloaded and is ready to play), and adjusts the download rate to ensure an appropriate buffer size is maintained. The logic that the player uses to manage this is critical to ensure that the video is always playing at the highest possible quality.
Using a player with poor adaptation logic can lead to poor performance and buffering videos, which will inevitably lead to users switching off.

5. Easy to install and update?

Obviously installing your player is an important part of the job, and should be as easy as possible. Another very important consideration is the maintenance of the player. Because the industry is moving so fast, any player you use will need to be updated regularly if it is to continue playing video at a commercially competitive standard.
In most scenarios, a good solution to the challenge of upgrading is to use an externally hosted JavaScript player. This type of setup is very easy to install, and the player provider can upgrade the player automatically without you needing to do anything. However, in some cases it might be beneficial to stay at a fixed player version and test updates in a staging environment beforehand.
Obviously the best course of action is to use a player with both of these options available. The Bitmovin Player is just such a player. One can either use the CDN hosted player, or download the files to a in-house or third party server. Furthermore, updates can be received automatically, or you can opt to use a dedicated version.
More information about the available options, can be found in our online documentation.

6. Is it ready to handle subtitles, closed captions and multiple audio tracks?

access2Broadcast television has been offering assistance to help people who have difficulty seeing or hearing for years. These systems are also very important for online video.
Subtitles allow viewers to read the dialogue along with the voice track. Closed captions do the same, but include the entire audio track, and so provide the user more audio information in the form of descriptions. (E.g. “Dog barks”, “Door slams”).
As well as additional captions and text, many videos come with multiple soundtracks to accommodate different languages or to assist visually impaired users with more descriptive audio. (Often used in sports commentary tracks).
A correctly configured video manifest will contain the information regarding the various audio tracks available. (E.g. English, French or German). The player should detect this, and automatically add these options to the user interface. The player should also allow additional tracks to be added to its configuration so it can synchronize and enable captioning and subtitles.

7. How well does it support live streaming?

Every player on the market will allow you to play on demand as well as live streaming video, but when it comes to live streaming, all players are definitely not created equal. DVR support for example is a feature that is not available everywhere, but makes the video a lot more user friendly by allowing the viewer to move back and forth through the livestream.
You can see an example of Live-Streaming with enabled DVR in our Demo Area. The movie is being broadcast (as if it was on television) so you can watch it live, or scroll back and forth through the stream as you wish and pause the stream whenever desired.

8. Does it support DRM?

DRM encryptionOne of the big topics in online video is Digital Rights Management. If you are ever planning to stream a video provided to you from another publisher, or if you intent to protect your own content, then your player will need to support a variety of DRM systems.
This raises the browser compatibility issue again, as different browsers rely on different encryption methods. To be completely cross-browser compatible and to ensure you are covered for an
y future requirements your player should support Widevine, Playready, Fairplay, as well as Primetime. Furthermore, a good player will also -support multi-DRM options. (Download our DRM Whitepaper)
Learn more in our DRM Setup guide.

9. Is it ready to handle 360° playback?

360° videos are becoming hugely popular, and as 360° cameras become cheaper and easier to use 360° will continue to grow in popularity.
360° videos are by nature, much larger than normal videos, and therefore the adaptive logic behind the player becomes even more important. A player ready for 360° videos needs to be both MPEG-DASH and HLS compatible, and have sound adaptive logic allowing it to switch quickly and smoothly between different streams, to avoid buffering.

10. Can you customize the look and feel of the HTML5 web player?

Adjusting the skin of your player is a must for just about any video provider. To future proof your video portal you should be sure that your player can be completely customized, not just “re-branded”.
A good player will allow you to update the logo, play button, background colors, all of the icons, all of the controls. If fact every aspect of the player’s visual appearance should be completely editable. You can see an example of a fully customizable player in our player skinning tutorial, complete with skinning tool.

11. Can the player interact with your application and third party services, like analytics?

For the long term success of your online business, this may be the most important point of all. As your business grows, and more and more visitors watch your videos, your platform will inevitably need to grow with it. Your video player will need to work with your system, not the other way around, to ensure that you have complete control over the direction of this growth.

The player you use should have a well built API that is easy to set up, and is flexible enough that it fits to your business model.

Analytics and reporting, delivering player status to your back end application and allowing you to integrate video playback commands into side navigation are just some of the features you may need as you move forward. Predicting the future is always difficult, but whether you can foresee these needs or not, choosing a player with a flexible, well maintained and well documented API will give you the security of knowing that you will never run into a development dead end with your platform.
More information on video player APIs

A final thought on choosing the right player

As they say, “Failing to plan, is planning to fail”. For your online video system to be successful, you need to be ready for success, which means being ready to grow, ready to meet changing customer needs and ready to deal with a changing technology landscape.
Obviously the Bitmovin Player is one of the HTML5 adaptive streaming players that you should consider. Our player is truly state of the art, and our team is improving it every single day. Bitmovin’s founders were instrumental in helping the Moving Picture Experts Group (MPEG) to develop the MPEG-DASH standard, and they have a very clear vision, not only for Bitmovin, but also for adaptive streaming technology standards and the surrounding technologies in general.
You can install the Bitmovin Player and use it with all features for free by signing up to our FREE plan.
This account will also give you access to our cloud encoding service.

Tristan Boyd

Tristan Boyd

Tristan spends most of his time creating text and graphics for both online and printed media, to explain these solutions and how they can be applied to real world commercial video workflows.


Related Posts

html5 video browser support - Bitmovin
VidTech

3-Pass encoding enhances video quality, making every bit count

html5 video browser support - Bitmovin
VidTech

“Better Together” at IBC 2024: Elevating Streaming Experiences with Bitmovin Innovators Network

html5 video browser support - Bitmovin
VidTech

The Importance of Observability in Live Video Streaming

Join the conversation