Jacob Arends – Bitmovin

Open-Source vs. Commercial Players: Understanding the True Cost of Ownership

Jacob Arends — Tue, 02 Apr 2024 11:19:15 +0000

When choosing between a commercial player and building out an open-source option, there are many factors to consider. Cost is always the major driving factor, but it doesn’t always reflect the resources required for development. In this blog, we will discuss some recent findings from the Bitmovin engineering and integrations teams on what it takes to build a playback solution fit for modern streaming services. We will be focusing on the engineering time required for building such a solution in-house, using open-source and native technologies, versus leveraging a commercial player where many of the necessary items are pre-built. It’s important to understand the short and long-term effects of the decision as it can have a very high and lasting impact on development teams, either keeping them snowed under with necessary maintenance or freeing up time to create unique value for the service.

To get right into it, let’s take a look at the pros and cons of both choices.

Pros & cons of choosing an open-source player:

Pros:

It’s free; open-source players have no license fees
Offers flexibility to create your own plugins and integrations
The in-house team is in full control over the player development

Cons:

Requires large initial investment (developer time and costs) to get up and running to the standards of modern streaming services
Requires in-house team to have or gain video streaming expertise
Restricted by the limitations inherent in the open-source player’s architecture
Only have community support available to help the in-house team should any issues arise

Pros & cons of choosing a commercial player:

Pros:

Speeds up the deployment time while providing robust performance and feature-set
Player maintenance and new market trending feature development as part of the package
Leverage a team of technical video player experts rather than hiring in-house
Frees up time to focus on core business value
Access to existing pre-integrations with a wide Partner ecosystem

Cons:

It’s not free; commercial players have license fees
Usually has less flexibility for creating integrations for the player
Restricted by the limitations inherent in the commercial player’s architecture

As can be seen from the breakdown above, there are strong reasons to go with either option. So, ultimately, the decision comes down to a trade-off between cost and flexibility.

Spoiler: At the end of this blog, we’ll discuss how Bitmovin is addressing this decision by offering customers the performance of the Bitmovin Player with the flexibility of open-source, but more on that later.

TCO: Comparing open-source to commercial players in 3 scenarios

When it comes to cost, it is important to understand the break-even point: At what point does licensing a commercial player become more cost-effective in terms of development resources and delivery time than building an in-house system based on open-source?

Below, we will discuss 3 streaming service scenarios of increasing complexity: browser-based, Multi-platform, and enterprise. For each, we will explore how Bitmovin’s Player integrations compare to building in-house solutions by focusing on ‘Time to Market’ and ‘Annual Maintenance’.

Person-Months definition:

As an industry standard, we will use Person-Months to reference how much time it would take a single engineer working full time to complete a project, i.e., 6 PMs = 1 person working full time on a project for 6 months. Note that we will not assume that tasks could be done in parallel by multiple engineers, as in many cases this is not possible; therefore, 6 PMs does not necessarily mean the same work could be achieved in 3 months by 2 engineers, and even less likely in 1 month by 6 engineers.

Scenario 1: Browser-Based Streaming Service

Estimated time showing the difference between what is saved in scenario 1 by deploying the Bitmovin Player compared to open-source players – 60% to 90%

Factor 1 – Time to Market – Feature Aspects:

In this scenario, we focused on browser-based streaming only, which requires the fewest devices and features to satisfy viewers of the 3 scenarios. Here the playback experience includes no additional integrations like Ad insertion or content protection, though there may, however, be other feature requirements needed to satisfy the audience and maintain a higher user experience, such as

Accessibility standards
Closed caption handling (formats, rendering, styling, metadata)
Player user interface modifications
Graphic overlays
Additional metadata parsing

Just for these features alone, when developing on an open-source player, our team estimates this feature work to take up to 1 person-month.

Factor 2 – Time to Market – Adding QA and Event tracking:

Depending on the size of the audience, services will want to consider both:

Player test suite for release automation
Simple analytics/statistics to monitor usage and engagement metrics

For both of these items, our team estimates that it will take about 4 person-months to get a basic test suite and an event-tracking analytics service up and running.

Altogether, we estimate it will take up to 4 person-months just to get up to speed with the experience viewers expect and a service level internal engineers can work with. This is in contrast to the estimated time of 1 person-month to complete an integration of Bitmovin’s Playback solution, which frees up 3 person-months.

Factor 3 – Annual Maintenance:

Whether it’s adapting to changes or edge cases in different browsers, improving the test suite or simple bug fixes as they’re reported, we estimate this collectively to cost an engineering team between 2-4 person-months each year. In comparison to the less than 1 person-month a year required for just reporting issues to Bitmovin and updating to the latest Player versions once the Bitmovin engineers have resolved them.

Total time saved by utilizing Bitmovin’s Playback solutions

Time to Market: 3 person-months
Annual Maintenance: 1-3 person-months per year

Scenario 2: Multi-platform Streaming Service

Estimated time showing the difference between what is saved in scenario 2 by deploying the Bitmovin Player compared to open-source players – 60% to 80%

Factor 1 – Time to Market – Additional devices:

In addition to the work required to create the browser-based experience, multi-platform streaming services will also be required to reach their viewers on mobile devices. Video playback on Android and iOS devices is a different beast to web browsers; for one thing, there isn’t the option of having multiple open-source players to choose from, in-house solutions will need to be based on the native players:

ExoPlayer on Android
AVPlayer on iOS

While having lots of low-level video logic handled by the native player has its advantages, engineers are still required to develop non-base features and customizations on top, all while being restricted by what’s possible in the Android and iOS environments.

Factor 2 – Time to Market – Monetization:

With a multi-platform streaming service having a large enough user base, it will likely mean these services are thinking about other ways to monetize, such as advertising. Without having the pipeline to encode the ads themselves, client-side ad insertion (CSAI) is the first option for streaming services, with Google’s IMA SDK being the standard way to integrate CSAI into a streaming workflow (read more on our blog about CSAI and SSAI). Interactive Media Ads SDK handles the ad playback by using a separate video element, leaving streaming services to focus on controlling the main content. However, while integrations for this SDK exist for open-source players, there are still features that aren’t available out of the box, such as ad scheduling, which will require extra development work.

Another consideration aside from monetization is protecting content from unauthorized viewing or distribution using technologies like DRM (Digital Rights Management). Additional integrations like DRM will require configuration on the player to set up, with use cases like multi-DRM being more complicated than others.

Our engineers anticipate up to another 6 person-months, with Mobile and CSAI integrations accounting for most of that time, bringing it to a total of 10 person-months to get to market with the expected viewer experience of a multi-platform streaming service. This is in contrast to the total of 3 person-months required to integrate Bitmovin’s dedicated SDKs for Web, iOS, and Android platforms into the various websites and applications, as well as make use of the pre-integrated IMA SDK for Ad insertion or use the dedicated Bitmovin Advertising Module for more control over the ad playback experience.

Factor 3 – Annual Maintenance:

On a recurring basis, mobile platforms require lots of maintenance to ensure security and compatibility requirements are met, otherwise other library dependencies may fail, or worse, the app may not be accepted into the Google Play or Apple App Store. Our engineering team estimates they spend over 600 hours annually on just baseline maintenance for both iOS and Android together. In addition, any updates to the IMA SDK or Google’s ad workflow in general will need to be accounted for. Including the maintenance required for the browser-based streaming service, we estimate an in-house solution to collectively cost an engineering team 4-6 person-months per year.

This is in contrast to the less than 1 person-month a year required for just reporting issues to Bitmovin and updating to the latest Player versions once the Bitmovin engineers have resolved them.

Total time saved by utilizing Bitmovin’s Playback solutions

Time to Market: 7 person-months
Annual Maintenance: 3-5 person-months per year

Scenario 3: Enterprise Streaming Service

Estimated time showing the difference between what is saved in scenario 3 by deploying the Bitmovin Player compared to open-source players – 70% to 80%

Factor 1 – Time to Market – Additional devices

Building on the work required for a multi-platform streaming service, enterprise streaming service use cases are far more complex and are also where the most engineering time can be saved. Viewers using the largest streaming services on the market will expect to be able to stream on every device, particularly focusing on the Living Room, i.e., SmartTV and other connected TV devices such as game consoles and set-top boxes (STBs). A standard set of such devices would include:

LG WebOS TV
Samsung Tizen TV
Hisense TV
Vizio TV
Playstation 4 & 5
Xbox
Comcast STB
Sky STB
Roku

Of these 10 devices, besides Roku, all make use of browser-based playback, meaning an HTML5 player could be used. However, unlike browsers, these connected TVs and devices can have varying hardware and software specifications that will inevitably cause issues with the playback experience. An example of this is Hisense and Vizio TVs, which have a lot of fragmentation in the specification of their TVs (even those released in the same year), meaning different issues could appear on two seemingly similar models. Additionally, different devices could have different browser implementations, like in the Managed Media Source (MSE) API; differences in the MSE implementation could mean services may need to have multiple DRM technologies or separate delivery pipelines for specific devices. Also, as mentioned, Roku is not browser-based and requires its own native implementation.

All in all, our team estimates about 5-14 person-months to add support and integrate with a set of the aforementioned devices. One important note to add to this is that these estimations do not include adding this set of devices to any test automation system for physical device testing.

Factor 2 – Time to Market – Additional Features

With enterprise-level device coverage comes the expectation of enterprise-level features, which are likely only possible due to the necessary backend/pipeline created during a streaming service progression to this size. These use cases may include implementing Server-Side Ad Insertion (SSAI), which can cause many complications on Smart TV devices in particular, such as switching between DRM-protected content and clear (no DRM) content, as well as buffer management, simply due to non-standardized native API implementations and/or the absence of proper logging. Our team goes into more detail about SSAI and its challenges in this blog.

Another example of an enterprise use case is low latency streaming, which again not only comes with its own implementation challenges but also a lot of work to understand platform-specific limitations. For example, lower-end devices, such as STBs or pre-2018 TV models with less processing power, could struggle to keep a stream at the live edge without stalls, not having a large enough buffer to stabilize playback. For this feature development and additional troubleshooting per platform, our team estimates somewhere between 6-12 person-months to achieve a functional enterprise player solution.

Given the 10 person-months required for the multi-platform streaming service, the additional work to achieve an enterprise workflow with an in-house solution is at least another year. However as not all devices or streaming workflows are crucial to every service in the first few years, we estimated an additional 14 months is sufficient to add a few connected TV devices and implement SSAI on these platforms.

All in all, we estimate a total of 24 person-months to get to market with an in-house enterprise playback solution that meets the expected viewer experience. This is in contrast to the 8 person-months required for integrating Bitmovin’s Player SDKs with dedicated modules for specific devices and intuitive APIs to abstract away the nuances of the native platform APIs. Not to mention removing the learning curve; all the browser-based devices would use Bitmovin’s Web SDK and, therefore, a single set of APIs, whereas an engineer for an in-house solution would need to have very in-depth knowledge of each platform’s unique properties and APIs. On top of all this, streaming services can leverage the expertise of Bitmovin’s solutions and integrations teams, who can offer expert advice on best practices/industry trends and even get hands-on with assisting streaming services to get to market as quickly and painlessly as possible.

Factor 3 – Annual Maintenance:

Like most consumables nowadays, manufacturers are launching new device ranges every year (or more), meaning that viewers are getting newer TVs, smartphones, and game consoles every year. This creates a requirement for continuous testing on both new and existing platforms to ensure compatibility and an uninterrupted experience for all viewers across all devices. Device testing can be especially challenging with regional devices or devices with high fragmentation in hardware and software, where debugging and reproducibility can be difficult. Given the complexity of the enterprise workflow and how many moving parts there are in the delivery chain at any one time, integrity maintenance can be very time-consuming, and as such, our engineers estimate it to be an additional 8+ person-months per year. This doesn’t include any additional feature maintenance that may come up; in the examples of Low Latency and SSAI workflows, there are new protocols, metadata, and managing technologies being added to the industry standards all the time, which may want/need to be implemented by enterprise streaming services to remain competitive.

On top of the multi-platform streaming service annual maintenance, our team estimates up to an additional 12 person-months per year for enterprise services.

In comparison to the estimated 1 person-month per year in annual maintenance for using the Bitmovin Player, where all the device stability testing is done as part of the service, along with handling all the nuances of updated protocols and standards in the industry. This time is mainly for reporting issues to Bitmovin and updating the latest Player versions once the Bitmovin engineers have resolved them. Services can further save time by getting weekly stream health reports from Bitmovin’s Stream Lab, where customers can submit streams to be tested on physical devices like Smart TVs, game consoles, browsers, and STBs.

Total time saved by utilizing Bitmovin’s Playback solutions:

Time to Market: 16+ person-months

Annual Maintenance: 11+ person-months a year

Summing up the scenarios

In conclusion, these numbers are now a valuable tool for any streaming service to consider and make sure they’re choosing the best option. However, these numbers are only a guide constructed from our collective experiences at Bitmovin, and so aren’t going to apply strictly to every use case. They can, however, at least spark the right questions when it comes to the ROI of ‘build-or-buy’. Namely, to use the enterprise use case as an example, the question is: does getting to market 16+ months sooner, and so 16+ months generating ad and subscription revenue, outweigh the cost of a commercial player license?

If you have any questions about the contents of this article, please feel free to get in touch.

A solution that fits the best of both worlds

In addition to the cost/resource-focused rationale behind the decision to use open-source vs. commercial, the other large factor we hear in the market is the desire for flexibility. Traditionally and by nature, the open-source model allows engineers full control and flexibility over their system, while commercial solutions tend to be more closed off. Until now.

At Bitmovin, embracing the benefits of open-source, we’re resolving the flexibility aspect of a commercial player with our next Web Player SDK, Player Web X. This new Web Player benefits from a completely new architecture, which most notably has an open-source plugin system. It gives engineers the performance of the Bitmovin Player with the flexibility of open-source. You can see more about Player Web X on our dedicated Player Web X page.

The post Open-Source vs. Commercial Players: Understanding the True Cost of Ownership appeared first on Bitmovin.

The Ultimate Guide to HTML5 Video Players [2024]

Adam Massaro — Thu, 07 Dec 2023 14:32:29 +0000

Developers know that a lot goes into video streaming. The content must be produced, encoded, transcoded, and distributed globally. For this reason, delivering seamless over-the-top (OTT) video experiences often requires piecing together a handful of technology components. The addition of a paywall or ads to monetize the content only complicates this further.

For viewers, though, the process is simple. Simply press play and voilà. As far as end users are concerned, the HTML5 video player is the only piece of the streaming tech stack that matters.

Video players act as the face of streaming platforms, giving viewers control over what they watch, which devices they watch it on, and when the content plays. Players also tie everything together. All viewer requests to control video playback originate from the media player, making player API access critical to the entire workflow.

In this Ultimate Guide to HTML5 Video Players, we cover what to look for when choosing a player, when to go with a free or open-source option vs. a premium paid solution, and the best HTML5 video players to build on top of in 2024.

What is an HTML5 video player?

HTML5 video players are the online interfaces through which viewers access, control, and view streaming content. The FuboTV video player that pops up on subscribers’ smart TV and the ClassPass player that participants use to stream fitness classes on their mobile devices are both examples of this.

ClassPass HTML5 Video Player

Because streaming devices now take many different forms, HTML5 video players ensure a consistent experience no matter what screen the content is being consumed on. Online video players also add additional functionality to the viewing experience — such as content recommendations and call-to-action buttons.

History of HTML5 video players

First, there was Flash

Let’s zoom in on the HTML5 part of the HTML5 video players. Back in the day of HTML4, platform developers needed plugins to embed audio and video content into web pages. This is when Adobe Flash Player reigned supreme. Because native video playback wasn’t possible, more than 98% of browsers had Flash installed.

But this changed as the internet became more open. This first draft of HTML5 was published in January 2008, making browser-based multimedia support a possibility. Shortly thereafter, Steve Jobs published his infamous Thoughts on Flash, making it known that Apple’s products would never support Flash as a means to play video.

Jobs explained:

“[We] strongly believe that all standards pertaining to the web should be open. Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript — all open standards…

Adobe has repeatedly said that Apple mobile devices cannot access “the full web” because 75% of video on the web is in Flash. What they don’t say is that almost all this video is also available in a more modern format, H.264, and viewable on iPhones, iPods and iPads. YouTube, with an estimated 40% of the web’s video, shines in an app bundled on all Apple mobile devices, with the iPad offering perhaps the best YouTube discovery and viewing experience ever. Add to this video from Vimeo, Netflix, Facebook, ABC, CBS, CNN, MSNBC, Fox News, ESPN, NPR, Time, The New York Times, The Wall Street Journal, Sports Illustrated, People, National Geographic, and many, many others. iPhone, iPod and iPad users aren’t missing much video.”

Then came the push for plugin-free video technologies

As a result of this memo, companies like Netflix began working on several HTML5 Premium Video Extensions to power a plugin-free future of video streaming. This was important: While HTML5’s support for and tags was a welcome addition, this still didn’t natively support live and on-demand streaming within the browser. Specifically, the video element lacked the video controls users need to stream videos, as well as the logic to switch between different renditions to avoid buffering.

As such, web developers needed a way to control how streaming video would load and play when embedded on a webpage. HTML5 also had limitations around digital rights management (DRM), subtitle switching, and including multiple audio files so industry leaders worked to lay the groundwork for browser-independent player technology with standards like Media Source Extensions (MSE).

This made it possible to move away from proprietary media players like Flash and Silverlight. But the online video world still needed a player technology to tie it all together.

The HTML5 video player became the future of streaming

Once HTML5 became a standard, OTT platforms quickly made the move to HTML5 video players. Netflix, YouTube, and our team at Bitmovin helped drive this transformation.

While Netflix and YouTube built their own proprietary media players from the ground up, we at Bitmovin launched our HTML video player to make it easy for platform developers to stream content to their audiences.

The Bitmovin website and online video player circa 2016

Since then, organizations ranging from Periscope to fuboTV have built their platforms using our media player. And today, HTML5 video players like ours are the reason why video experiences are prevalent and seamless on every device.

“Bitmovin gives us greater control over the video player than any other player in the market. We were able to get our implementation to production with markedly better experience than our previous player. We’re looking forward to exploring more ways to work together.”

– Sung Ho Choi (Co-founder, fuboTV)

Benefits of video streaming with an HTML5 video player

HTML5 video players aren’t just a necessity to embed videos onto websites. They’re also key to delivering flawless viewer experiences. Ensuring playback quality on any screen is a key benefit of media players. Beyond that, though, web video players offer additional capabilities that boost viewer engagement.

Here’s a look at the key benefits of video players for content providers and viewers:

Scalable delivery. HTML5 video players enable content distributors to build cross-platform experiences that power online video streaming on a wide range of devices and browsers. Whether your viewers are on a desktop computer, smartphone, tablet, or smart TV, video players help you overcome compatibility issues.
User-friendly interface. We’ve all come to expect intuitive digital experiences. With the right online video player, you make it easy for viewers to interact with your content using video controls. The play button, pause button, volume adjustment, seek bar, and different modes like full-screen all enhance the user experience.
High-quality playback. Intelligent video players ensure smooth and uninterrupted playback with adaptive bitrate streaming. Called ABR, this technology allows the video content to adapt on the fly based on each user’s bandwidth and device resources. For instance, if a viewer’s internet connection changes for the worse, the player can downgrade video quality — thus reducing buffering and disruptions.
Accessibility. Video players ensure that your content is accessible to the largest audience possible with features like closed captions, subtitles, and multiple audio tracks. This also helps with compliance.
Interactivity. Whether you’re looking to build low-latency live streaming experiences or want to display 360° video with VR, today’s video players make the internet more interactive by supporting these capabilities.
Enhanced engagement and personalization. Content recommendations are now a standard part of video consumption. But that’s not the only way a web video player can boost engagement. OTT fitness platforms like ClassPass integrate information about the viewer’s performance and heart rate into the video content to create fully personalized experiences.
Content monetization. Whether the platform you’re building uses ad-based monetization, subscription-based, or a combination of both, video players make monetization possible. Support for DRM, client-side and server-side ad insertion (CSAI and SSAI), and even static overlays help achieve this.
Content and audience insight. Because most streaming workflows are made up of disparate systems and vendors, it can be difficult to pinpoint the source of streaming issues and drill into the user experience. But video players that also offer analytics make it easy to troubleshoot errors and gain actionable insight into viewer behavior.

How to choose an HTML5 video player: 10 Key features

The sheer number of open-source and proprietary video players out there can make it difficult to select the right one. The feature sets vary with each provider, so we’d recommend considering the following to help narrow down your options.

Integration effort

The ease of integrating an online video player into your workflow will significantly impact your development timeline and the associated costs. Teams looking to get their services to market fast should pick a solution with developer tools to make it easy to embed the HTML5 player into their application.

Look for a video player that provides:

API documentation
Dedicated software developer kits (SDKs)
Support for popular programming languages
Development guides
Code samples
Community forums
24/7 technical support
Automated testing solutions

Launching cross-platform video experiences is already complex. So any opportunity to simplify things will speed up time to market — which translates to new subscribers and reduced churn. You’ll also want to find an online video player with preset configurations for different use cases to minimize headaches when your dev team is getting started.

Customization

Your video player is a primary customer touchpoint. So your brand’s identity needs to shine through it. As such, you should look for an HTML5 player that allows extensive customization over the user interface (UI).

The ability to adjust the appearance, control buttons, and add interactive elements will help maintain your branding and deliver the differentiated experience you’re aiming to build. Additional playback features like preview thumbnails and variable playback speeds only further enhance your UI.

That said, when speed-to-market is a priority, you don’t want to start from scratch. Finding a flexible HTML5 video player that can be tweaked without having to build the entire UI is a great middle ground.

Device and browser coverage

Don’t lose sight of all the devices that we stream content on today. Smart TVs, set-top boxes, gaming consoles, web browsers, and smartphones all have different requirements. For this reason, you’ll want to find a web video player that’s compatible with a variety of devices and browsers to maximize your audience.

HTML5 video players with frequent releases are better equipped to support the many devices out there. You’ll also save a ton of time if you go with a video player that offers dedicated SDKs for individual devices.

Performance

When evaluating different media players, you should demand more than just smooth streaming. The performance of a video player is also defined by things like fast video startup time, seamless source switching, and seeking.

Here’s a closer look at each:

Startup time: You want to ensure immediate playback without any perceived delay when your viewers click play. Why? It’s simple. The longer a viewer has to wait for video assets to load, the more likely they are to tune out.
Seeking: Not only do today’s viewers lack patience, they also demand full control. The time it takes for video content to resume playback after the user jumps to a random position in a timeline should also be a consideration when comparing video players.
Source switching: Finally, you’ll want to make it easy for users to switch between channels. With the rise of FAST channels, this is critical for OTT providers looking to recreate the experience of linear TV over cable.

See how Bitmovin Player compares to leading open-source video players in terms of these metrics in this blog.

DRM support

Digital rights management (DRM) is essential to protect your video content from unauthorized access — especially if you’re distributing premium shows and movies to subscribers. DRM technologies encrypt the video files and control access to decryption keys. When users attempt to access the content, the HTML5 video player communicates directly with the DRM server to confirm that the license is valid. Once the license is authenticated, the video player obtains the decryption key, granting access to play the content securely.

You’ll want to double-check that the HTML5 video player you select supports industry-standard DRM technologies like Widevine, PlayReady, FairPlay, and Adobe Primetime.

“DRM is often framed as a suite of technologies for protecting against content piracy, but its role is much broader than that. DRM is at the heart of the revenue side of a streaming services business, ensuring that an operator can set up a series of business rules that permit different viewing rights at different price points or monetization models.”

– Olga Kornienko (COO & Co-founder, EZDRM)

Advertising support

If you’re monetizing your video content with ads, you’ll want to make sure that they render in an efficient and high-quality manner. Support for the ad formats you’re using, seamless integration with ad partners, and flexibility for different types of ads (pre-, mid-, and post-roll; overlays; increasingly interactive formats, etc.) are all key capabilities to look for.

According to our annual Video Developer Report,server-side ad insertion (SSAI) and client-side ad insertion (CSAI) are both prevalent in the video streaming industry. Not all online media players support the latter, so that’s something to take into account if you’re implementing CSAI.

What ad architecture are you using today?

Video Developer Report : What ad architecture are you using today?

It’s also a good idea to keep an eye on ad performance. Because OTT advertising is often purchased in terms of cost per 100 impressions, measuring this is crucial. Impressions, click-through rates, and quick load times all indicate a good viewer experience. Better ad performance leads to more revenue, so you’ll want a video player that pre-integrates with an analytics tool for insight into these metrics.

Adaptive bitrate (ABR) playback

One of the key benefits of HTML5 players is the ability to dynamically adapt the content based on each individual viewer’s device and internet speed. Called adaptive bitrate streaming or ABR, this is why you sometimes notice a stream you’re watching switch from fuzzy to sharp in a matter of seconds.

While content must be encoded and prepared to enable ABR, the video player plays a crucial role. As shown in the diagram above, ABR players switch between different video renditions as connectivity changes. Users with poor connections get an uninterrupted experience despite resource constraints; whereas those with speedier connections enjoy the highest-quality file available.

Subtitle and audio tracks

Subtitles and multi-audio tracks aren’t just for accessibility. Many viewers prefer to consume video content with closed captions today. And delivering the flexibility for viewers to enjoy your content in their preferred language is a no-brainer.

For this, you’ll want to look for an online video player that lets viewers instantaneously switch to alternate audio tracks and toggle through subtitle options during playback.

Third-party integrations

Consider the player’s compatibility with third-party tools and services. Whether you need analytics capabilities, interactive overlays, or content security solutions, ease of integration with your favorite tools should be a key criterion when researching video players.

Finding an HTML5 player with an extensive partner network will also accelerate the time to market. And beyond just speeding up your deployment, these integrations can help offset development costs.

Testing and analytics

A reliable HTML5 video player is essential for ensuring a high-quality viewing experience. Unfortunately, when it comes to streaming, content distributors often fail to catch errors until it’s too late.

The best tactics for preventing errors are testing in advance and monitoring in real time. For that, you’ll want to look for a video player that integrates with testing and analytics solutions. At Bitmovin, we developed Stream Lab to ensure the quality of experience (QoE) when using Bitmovin Player, and also offer Bitmovin Analytics for additional insights for error debugging and quality of experience improvements.

Free and open-source vs. paid video players

When building an OTT platform — or any software application — the consideration between free and open-source vs commercial tech is bound to pop up.

And here at Bitmovin, we’re major proponents of an open internet. Our CTO Christopher Mueller co-created the open MPEG-DASH standard as an alternative to proprietary technologies, and he regularly contributes to open-source tools.

Open-source video players make it possible to build bespoke end-user experiences nearly from scratch. But that means a bigger time investment, not to mention a burden on in-house resources.

Both free and paid video players have their advantages. So the right choice comes down to your unique requirements. Here’s a quick side-by-side of how the two compare.

Open-Source Video Players	Commercial Video Players
Free to use and deploy.	Purchased on a pay-as-you-go basis, as a subscription, or as part of a custom plan.
Supported by a large community of independent developers.	Comes with dedicated technical support, SLAs, and developer tools.
More flexibility.	Better performance.
Can be modified and customized limitlessly.	Minimal code is required to deploy essential use cases.
May lack out-of-the-box capabilities and integrations.	Often comes with dedicated integrations with third-party tools and partners.
Contributor-built plugins allow additional functionality.	Has a more extensive feature set built in.
Must be maintained.	Maintained and hosted by a dedicated team.
Bigger drain on in-house resources and timelines.	Frequent releases help developers stay ahead of industry trends.

What’s more common: open-source vs. commercial video players

In this year’s Video Developer Report, we saw a dramatic increase in the number of participants choosing to build an in-house HTML5 video player with open-source code. We also learned that 25% of development teams spend 7+ days each month maintaining their video player solution.

How many hours per month does your development team spend on maintaining your video player solution?

And this is really at the crux of the consideration between an open-source and a commercial video player. While builders love extensibility, businesses often require turnkey solutions that can be deployed quickly.

Luckily, though, it’s not always an either/or consideration. We’ve been enhancing the Bitmovin Player to deliver both speed and the flexibility to create your own solution.

Our Lead Engineer Tom Macdonald explains:

“in order to allow our customers to support their own use cases, we will be releasing an open-source plug-in template. This template will enable our clients, partners, and developer community to create their own plug-ins for Player Web X and enhance their service to achieve an optimal and unique viewer experience. This is particularly powerful for teams that want to have the flexibility of an open-source web player with the performance and stability of a commercial player.”

Let’s dive into some of the other areas to evaluate in the buy vs. build debate.

Evaluating Quality of Experience (QoE)

Insight into the quality of experience (QoE) is crucial when delivering OTT video. Plus, your video streaming platform’s data belongs to you, so it should be easy to access. Unfortunately, though, QoE monitoring can be a challenge when using open-source video players. Most lack out-of-the-box integrations with video analytics solutions, and it’s often difficult to test how streams will perform on real devices.

Measuring ROI of your online video player

Infrastructure investment, development costs, maintenance expenses, content performance, and user retention all affect your bottom line. For this reason, you should find an online video player that makes it easy to cut costs across the streaming pipeline.

Open-source HTML5 video players lacking pre-integrations or technical support can eat into profits. Afterall, both time-to-market and ongoing maintenance impact the total cost of ownership (TCO).

When comparing the Bitmovin Player with open-source HTML5 video players, it’s clear that proprietary video players deliver cost savings both in the short- and long-term.

TCO Comparison: Building a website with video using open-source vs. Bitmovin

Video player security issues

Open-source software can present security risks ranging from vulnerabilities to targeted attacks. Because the code of these HTML5 video players is inherited from a community of contributors, there’s less organization and standardization to how new features are added.

As such, companies relying on open-source applications are more vulnerable to attacks. If you do go the open-source route, proper implementation and maintenance are necessary safeguards.

Video player software development kits (SDKs)

Video player SDKs make it easy to deploy your solution on different devices, ensuring flawless playback on every screen. This helps organizations reach additional viewers with ease and can save hundreds of hours of development time.

Commercial HTML5 video players with SDKs also provide access to the latest features in their code set — ensuring a unified viewer experience regardless of how your audience streams the content.

With open-source HTML5 video players like Shaka Player, SDKs to ensure native playback on different devices are limited. This leaves engineering teams open to development issues and setbacks.

Branding and customizing your video player

Open-source HTML5 video players can be branded and customized, but it’ll require more effort than a paid solution with easy-to-configure UI styling. Additional support for branding elements like overlays is also hard to come by, and many open-source players lack the breadth of codec and protocol support that HTML5 video players like Bitmovin deliver.

When is an open-source video player the best option?

If you’re unwilling to spend money on your media player or need limitless flexibility, then open-source may be the way to go. Just know that launching your solution and customizing the HTML5 video player will take time and effort on your part — and your TCO will likely be higher.

Here are a couple of scenarios where opting for an open-source HTML5 video player may be the right choice:

Flexibility requirements:

Scenario: Your development team requires extensive customization and wants to modify the player’s code to meet specific requirements.
Reasoning: Open-source HTML5 video players provide the flexibility to tailor the experience to your unique use cases and requirements — assuming you have the time and money to invest.

Budget constraints:

Scenario: Your project has budget constraints, and you’re unable to make any HTML5 video player investments upfront.
Reasoning: Open-source players are generally free to use and deploy, making them an attractive option when financial resources are limited.

Bonus: A look at Bitmovin Video Player

Bitmovin Player ensures the highest-quality video experiences across the most devices and platforms on the market. Our HTML5 video player is flexible and easy to deploy, with dedicated SDKs for every device imaginable.

Bitmovin Player can be used for any monetization model (SVOD, AVOD, FAST, and HVOD) and it can be easily deployed on any device. It offers DRM, optimal adaptive bitrate streaming settings, UI design, and quick integration with a vast ecosystem of OTT streaming tools.

For ad-supported streaming, the Bitmovin Player supports server-side and client-side ad insertion (SSAI and CSAI) and can be integrated with any ad server using standard formats like CAST, VPAID, IMA, and VMAP. It’s also easy to create different types of ads with code examples — whether overlay, interactive, or clickable.

Bitmovin Player Advertising Capabilities

What’s more, with the Bitmovin Player, streaming platform developers gain access to a full suite of OTT infrastructure solutions for live and VOD encoding, streaming analytics, and more. Bitmovin’s products provide API coverage and full SDKs across the workflow, making it easy for anyone to build an end-to-end streaming solution. Plus, relying on a single vendor for multiple video streaming capabilities helps eliminate complexity and maximize value.

The Bitmovin Player can be customized to a T — providing a unique branded experience to your audience. In addition to adjusting the styling and adding preview graphics, you can apply CSS styles to its video player controls, progress bars, and overlays. Our HTML5 video player also enables additional functionality like Chromecast, fast channel switching, and picture-in-picture.

Bitmovin’s HTML5 Player

Finally, the Bitmovin Player is supported by documentation, a global community, and a team of video experts — helping to guide developers through integration, upgrades, and optimizations.

Key features:

Support for HLS, MPEG-DASH, Low-Latency HLS, and low-latency CMAF for DASH.
Out-of-the-box integration with Bitmovin Analytics.
Supports a variety of video and audio codecs, including H.264, H.265/HEVC, VP9, AAC, and MP3.
Multilanguage audio and subtitles.
SLAs and support from video experts
Displays 360° video with VR, 4K, and 8K.
Casting support.
Offline playback.

Compatibility:

The Bitmovin HTML5 Video Player is a highly versatile media player that’s compatible with a wide range of platforms, devices, and browsers, including:

Web browsers: Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer
Mobile devices: iOS (iPhone, iPad), Android (smartphones, tablets), and Windows Mobile
Smart TVs: Samsung Tizen, LG WebOS, Android TV, Apple TV, Hisense, and Vizio
Game consoles: PlayStation 4, PlayStation 5, Xbox One, and Nintendo Switch

Pros:

Pre-integrated support for countless gaming consoles, Smart TVs, consoles, browsers, and mobile devices.
A wide range of features to make it easy to get started and integrate into your workflows.
Reduces the need for obligatory player maintenance and architectural updates.
Over 1000 player tests performed on real devices daily to ensure stability.
Extensive advertising and monetization capabilities.
Patent-pending low-latency ABR algorithm to ensure broadcast-like latency in the highest quality possible.
Supported by Stream Lab testing and Birmovin Analytics to guarantee quality.
200+ customizable features and partner integrations to tailor the player to any use case.
Frequent releases ensure device support and feature compatibility.
Up-to-date product roadmap.

Cons:

After 10k free impressions per month, the pay-as-you-go plan charges $1.5 for every additional 1k impressions.

Conclusion

HTML5 players influence every aspect of an OTT platform. Your ability to generate ad revenue, reach users across different devices, and deliver an unmatched experience all starts with the video player that you build upon. That’s why it’s key to make sure that the solution you choose plays well with the rest of your tech stack.

Delivering the same experience across living room TVs, mobile screens, and web pages requires a flexible HTML5 video player that can be deployed anywhere. It’s also important to stream videos in multiple file formats to ensure scalable playback. For that, you’ll either need a video player like Bitmovin that offers broad protocol support or you’ll have to combine several open-source options in your workflow.

Whether opting for the extensibility of open-source or the turnkey efficiency of a commercial video player like Bitmovin, the goal is the same: Deliver an unparalleled viewing experience that captivates audiences and drives success in the competitive landscape of online video streaming.

This is where additional mechanisms for boosting viewer engagement come into play. You want to give users the ability to adjust playback speed, use casting devices, select the video size, turn full-screen mode on, and intuitively use player controls. Both open-source video players and commercial solutions can be configured to this end, but free options like Shaka Player will require a lot more elbow grease to elevate beyond the basic playback options.

By using Bitmovin as your HTML5 player, you won’t just benefit from professional-grade technology. We also deliver dedicated customer support and seamless integration across our partner network.

Our video player guarantees playback quality on any screen and is backed by the world’s first stream QoE testing service, Stream Lab. What’s more, the pre-integrated Bitmovin Analytics provides actionable insights to identify cost-saving and engagement-boosting opportunities.

That’s not all though. Bitmovin Streams helps simplify VOD and live streaming, serving as a single platform for transcoding, CDN delivery, video playback, security, and more. As an all-in-one solution that’s built for the cloud, it eliminates the complexity of building your infrastructure in-house. Alternatively, Bitmovin’s encoding, playback, and analytics products provide API access and full SDKs across the workflow, making it easy to pick and choose the best products for your OTT platform.

So what are you waiting for? Start your free trial today.

HTML5 video player FAQs

What does it mean for an HTML5 player to be open source?

An open-source HTML5 player is a media player that offers its source code to the public for use, modification, and redistribution. This makes it easy and free for anyone to download the source code and use it for any purpose. Open-source HTML5 video players can be modified and customized endlessly and are supported by a community of independent developers. That said, they require a lot of development and maintenance time and must be self-hosted.

What are the benefits of using a premium video player?

Premium HTML5 video players like Bitmovin Player are maintained and hosted by a third-party team and often offer better performance and stability than an open-source solution. Because these commercial HTML5 video players are delivered by a service provider, they come with SLAs and dedicated technical support. Premium players are also quicker to integrate and launch, which can reduce time-to-market and total cost of ownership (TCO) by over 60%.

What factors should I consider when choosing an online video player for my business?

When choosing an online video player, you want to consider the ease of integration, ability to quickly customize the technology, device coverage, player performance, DRM and advertising support, third-party integration, and accessibility through subtitle and audio tracks.

Depending on how you’re monetizing your video content, integration with different vendors will be required. It’s a good idea to research how easily each HTML5 player you’re considering can be combined with the rest of your tech stack. From there, we’d recommend familiarizing yourself with the development tools and technical support available, as that varies with each media player.

How do OTT platforms manage the costs of delivering content to users in different regions around the world, given differences in internet infrastructure and bandwidth?

Next-generation video encoding is key to cost-effectively delivering video content to users across the globe. Because end-user devices and connectivity vary, it’s become common to prepare the content in such a way that it can adapt to each viewer’s resources. This is called adaptive bitrate streaming, and it’s an essential capability that’s become standard across the best HTML5 video players.

Additionally, multi-codec delivery allows you to match each user with the highest-performing codec available. This maintains support for legacy devices, while also expanding 4K coverage for users with AV1-compatible devices.

Finally, per-title encoding can help reduce the bandwidth of your content by customizing the encoding ladder to each video. This yields additional opportunities to reduce bandwidth while still exceeding your audience’s expectations.

Many of the capabilities above are enabled earlier in the streaming workflow — when the video content is being transcoded and prepared for end-user delivery. Nonetheless, you’ll want to consider how your HTML5 player supports different codecs, protocols, and more.

Should I just use the standard video player element?

While the standard tag makes it easy to add video to your website, it doesn’t allow you to control streaming content. Rather, the element only supports embedded videos. Advanced features like ABR, live streaming, ad insertion, and DRM all require going beyond the standard video tag and using an HTML video player. Players also ensure a consistent experience across different browsers and devices.

Will new technology — such as 5G and improvements in video compression algorithms — impact the cost of running a video platform over time?

The cost of running a video platform is dynamic and impossible to forecast. Improvements in compression algorithms and encoding technology yield cost savings, but end-user demands for higher resolution and complex workflows supporting low-latency live delivery can drive costs up. Balancing quality with costs is key to OTT success, making your backend infrastructure a crucial factor when approaching monetization.

Per-title encoding capabilities, video analytics, and sustainability-focused playback features can all curb wasteful practices and deliver cost savings. For these, you’ll want to find an infrastructure provider like Bitmovin that’s focused on making it easier for OTT platforms to monetize their content.

Which criteria did you use to evaluate the online video players listed above?

If you search ‘video player’ on GitHub in 2024, you’ll see 31.5k+ repositories pop up. Because there’s no shortage of online media players, we created this guide to make it easier to compare all the options when building a professional streaming platform.

Our list of the best HTML5 video players was created by evaluating:

Streaming performance
Integration effort and availability of developer tools (e.g., API access, mobile SDK support, documentation, etc.)
Range of features (e.g., tools for secure streaming, video controls like multiple playback speeds, full-screen displays, etc.)
Compatibility across devices and browsers
Protocol and codec support
Ability to support additional requirements like low latency, VR, etc.

Because many of the online video players out there are tailored to a specific protocol (HLS vs. DASH) or operating system (Android vs. OS), compatibility across devices and browsers is limited. Additionally, the integration effort will always be greater with an open-source solution, so we focused more on the availability of plugins and documentation to extend these video players.

The post The Ultimate Guide to HTML5 Video Players [2024] appeared first on Bitmovin.

Completing the WebRTC Playback Experience – Enabling Rewind During Real-Time Live Streams

Jacob Arends — Tue, 12 Sep 2023 17:18:27 +0000

Live streaming has solidified its role as a pivotal component of modern video workflows, enabling platforms and media companies to captivate audiences with that sense of witnessing events as they happen. This trend has gained even greater momentum during and after the pandemic, as users craved live experiences that spanned a variety of interests – from sports enthusiasts catching their favorite games to at-home yoga classes on fitness platforms or students enrolling in online courses. To meet this demand, users sought the closest thing to real-time immersion, and this is where WebRTC came into play (pun intended).

What is WebRTC?

WebRTC is an open-source streaming technology that enables real-time data transport, whether that’s video, audio, or other data channels. Initially developed by Google in 2011, it has found widespread adoption in various industries that benefit from real-time communication, such as video conferencing, education, and gaming. The open-source, peer-to-peer technology allows for end-to-end encryption over an HTTPS connection and is compatible with all major browsers and platforms. The use of WebRTC skyrocketed through the use of video conferencing tools that have continued to grow in popularity since the pandemic, as well as in online gaming, where thousands of avid viewers could engage with their favorite content at near real-time latency.

Where does WebRTC fit in the OTT streaming industry?

The OTT streaming industry is currently dominated by 2 streaming protocols: Dash & HLS. However, DASH & HLS are not ideal for achieving lower latency live streaming. Typically, viewers experience between 8-30 seconds of latency due to the need to download segments before playback, meaning the closer to the live edge, the more potential for issues with video buffers and ABR (adaptive bitrate) decisions.

WebRTC takes streaming services a step further by enabling real-time (sub-second latency) streaming experiences. For live events, such as sports or education, it allows services to provide an opportunity for interactivity and contribution without fear of introducing latency in data transfer. Unlike DASH and HLS, WebRTC does not buffer; it prioritizes low latency so viewers can be assured that what they are seeing is happening in real-time.

To summarize the key benefits of WebRTC:

Ultra-Low Latency – WebRTC enables sub-second playback, ideal for live events, online gaming, and other interactive applications.
Cross-Platform Compatibility – WebRTC is supported by all major web browsers and platforms, ensuring broad compatibility and ease of adoption.
End-to-end Encryption – WebRTC incorporates robust security features, including end-to-end encryption, which ensures the privacy and security of communications.
Open Source – WebRTC benefits from a growing developer community that collaborates and innovates to bring continuous improvement to the technology.

However, WebRTC’s benefits come with a drawback: the inability to rewind or start the event from the beginning. This limitation affects many industries and their applications that require content review or replay, particularly in sports, where users want the ability to review and relive key moments.

What industries does WebRTC affect with this issue?

As streaming technology evolves and viewer expectations shift, low and real-time latency become more important, along with the ability to go back and see what they saw a few seconds before. This major playback feature affects many of the industries where real-time streaming is already crucial to the viewer experience, including:

Sports Broadcasting and Betting – Viewers often want to rewatch critical moments, goals, or plays during a live event, which can also affect micro-betting and in-game wagering.

Live selling and auctions – Buyers may want to check what was said about the product or previous items that were listed, requiring the need to browse back through the stream.

Webinars and Conferences – Webinars and virtual conferences may involve important presentations and discussions that can’t be revisited.
Gaming – Fans like to watch gameplay, or players can strategize by rewinding and analyzing previous actions.
Live Events and Performances – Live events, such as concerts or theater performances, need to provide instant replays of key moments or highlights.
Online Education – Students may need to rewind and review parts of a lecture or lesson for better understanding.
Emergency Services and Video Surveillance – Being able to analyze real-time video footage is crucial for making informed decisions and investigations.
Telemedicine – Medical professionals may need to go back to previous portions of a patient’s session to make accurate diagnoses or treatment recommendations.

This list highlights the importance of considering the specific requirements of an application when choosing a streaming technology. To address the replay/rewind issue, Bitmovin and Dolby.io collaborated to build a solution to enable these industries and use cases to dramatically improve the playback experience their viewers want and demand.

How we developed it – Dolby.io x Bitmovin Hackathon Project

During Bitmovin’s quarterly Hackathon in August 2023, Bitmovin engineers partnered with the team at Dolby.io to achieve the following objective:

Create a single live video player experience with real-time streaming and full rewind/review capabilities.

What tools did we use?

Bitmovin’s Player enables countless viewers to experience top-quality playback on all devices across the globe. With its rich feature set, streaming services can deliver their unique experience without compromising on quality.

Bitmovin’s Live Encoder is a resilient live streaming software platform that takes RTMP, SRT, or Zixi inputs and outputs to HLS and DASH for delivery to digital streaming services. Paired with Bitmovin CDN for delivery and storage.

Dolby.io’s Real-time Streaming (formerly Millicast) delivers a WebRTC-based CDN for large-scale streaming that is fast, easy, and reliable for delivering real-time video.

Videon EdgeCaster EZ Encoder is a portable appliance that brings cloud functionality on premises with LiveEdge. In this way, it combines the flexibility of software encoders with the power and reliability of hardware solutions. Regular software updates ensure support for the most advanced features and the latest industry standards.

What did we do?

Workflow diagram showing the source journey from Videon Edgecaster, to Dolby.io & Bitmovin Live Encoder, to Bitmovin Player

Using a Videon Edgecaster to create a dual RTMP output of a live source input, one RTMP output was delivered to Dolby.io’s service to create a real-time WebRTC stream, while the other was delivered to Bitmovin’s Live Encoder to create a standard Live HLS stream.

Dolby.io’s Real-time Streaming service accepts SRT, RTMP, and WHIP/WebRTC, making it easy to convert broadcast-grade streams into WebRTC for sub-second distribution around the globe and at scale.

The stream URLs from both Dolby.io and Bitmovin Live Encoder are now available to the demo page hosting the Bitmovin Player. From here, the player can then choose to load the Dolby.io stream as a WHEP/WebRTC source or the Bitmovin Live Encoder stream as a Live HLS source.

The Bitmovin Player’s open-source UI framework and extensive developer-friendly APIs allow development teams to create unique experiences. So, for the viewer experience, when the user selects the ‘LIVE’ control in the player UI and moves playback to the live edge, they would be viewing the WHEP/WebRTC source from Dolby.io. The user could then drag the timeline marker backward or use the custom “skip” control configured to timeshift back 30 seconds, in which case they would be viewing the live HLS source from the Bitmovin Live Encoder.

This gives the viewer the option to view their content in real-time with full review capability right back to the beginning of the live session. Additionally, by using Dolby.io’s Simulcasting solution, the viewer experience is always at the highest available quality, with advanced ABR logic working for both sources.

Example of how playback on the Bitmovin Player works with Dolby.io

What’s Next?

At Bitmovin, we are currently evaluating official support for WebRTC in the Bitmovin Player. While we’ve been able to address key playback issues, there is room for improvement and clear steps to elaborate on this very successful skunk-works project with Dolby.io. For example, we did not extend the project to use accurate timing information from the segments (like `prft` boxes) or playlists, so the solution could be more accurate and adaptive in understanding where the live edge of the live HLS stream was in comparison to the live encoding time to correctly synchronize with the real-time WebRTC stream. Using the Bitmovin Live Encoder, we could also extend the solution to include live-to-VOD workflows to allow users to watch the replay of a live event after it has ended or even reuse the content while a live event is still running.

Bitmovin and Dolby.io will continue the alliance to address market needs for live workflows where real-time streaming can provide an opportunity for services to enhance their viewers’ experience.

The post Completing the WebRTC Playback Experience – Enabling Rewind During Real-Time Live Streams appeared first on Bitmovin.

Player Web X – A New Player for a New Era

Tom Macdonald — Wed, 05 Jul 2023 10:25:57 +0000

Over the past few months, we’ve given insight into how we were evolving as a team and updating the Bitmovin Player for the future with our past blogs on “Why Structured Concurrency Matters for Developers” and “Developing a Video Player with Structured Concurrency”. In this third and final installment, the moment has finally come to highlight and detail our latest development and welcome the next iteration of our Player’s Web SDK.

Player Web X, or Web Player Version 10, is the newest innovation from the Bitmovin Player engineering team and is already showing promising results compared to other players on the market.

In this blog, we will go into more detail regarding the framework, the Player proof of concept (POC) our team built within just 2 weeks, and our path to making it a minimum viable product (MVP).

Reinventing Playback – Player Web X

The new player was built using a new framework, which was reimagined and built from the ground up using structured concurrency (see previous blog). The architecture of this framework allows for a lot of flexibility and, ultimately, optimal performance.

Because of this, Player Web X is specifically designed to be lightweight and performant. This has the benefit of providing the highest quality of experience for viewers and a great developer experience for those deploying a streaming service.

Notably, Player Web X’s enhanced performance is not limited to high-end devices, as keeping performance optimal on lower-powered devices such as Smart TVs and STBs, where hardware can play a limiting factor, is often more important to ensure a similar experience for all viewers.

In order to validate the performance benefits of this new framework and POC player, we have run some benchmarking experiments against industry-leading open-source web players. We’ll discuss the details further down, but one of the reasons we find Player Web X’s performance impressive and promising is that it’s based on our 2-week POC, which has yet to be production optimized.

Benchmarking – The Results

For these benchmarking tests, we ran a minimum of 40 tests for each player and stream combination for each metric, using Tears of Steel and Sintel.

Three metrics were measured:

Video Seeking: The time taken to resume playback after jumping to a random position in the timeline
Video Startup: The time taken to begin playback after loading a new source
Source Switching: The time taken to switch between two loaded sources

The three open-source players we used were

Shaka Player
HLS.js
Video.js

Each web player was set up with the most basic integration without any additional features beyond basic playback (i.e., no DRM, Ad insertion, etc.). The first set of tests was done on a Chrome browser, and you can see the correlating results below:

Graph of each player’s performance on Chrome

Test for video seeking time taken between the Bitmovin Player Web X, HLS.js, and Shaka Player

Test for video startup time taken between the Bitmovin Player Web X, HLS.js, Video.js, and Shaka Player

Test for source switching time taken between the Bitmovin Player Web X, HLS.js, Video.js, and Shaka Player

These box plots show the distribution of the 40 test runs, highlighting the median and interquartile range of the data points.

Test Overview on Chrome

Test 1: Video Seeking

The Player Web X POC has a larger range (total and interquartile) than both hls.js and Shaka player. However, from the graph, you can see the median seeking time for Player Web X is faster than the median time for HLS.js and Shaka Player. Note that Video.js is not represented in this graph because the seeking data points were far higher than the other three shown, and it wasn’t possible to showcase all of them and make the data easily visible.

Test 2: Video Startup

HLS.js has a very even symmetrical distribution on startup time, while the other three players have some slower startup times that sit far from their relatively short interquartile range. Also, notably, Player Web X has a larger interquartile range than the open-source players, meaning the start time is not quite as consistent. However, 75% of all startup events observed for Player Web X were faster than the median startup times for all the open-source players. Also, as in the video-seeking test, the fastest startup time for Player Web X is faster than the fastest startup time for all of the open-source players.

Test 3: Source Switching

The interquartile range for the four players is comparable, showing that source switching is not as consistent as startup, given the handling of two sources instead of just one. Player Web X has a larger overall range, though the slowest source switch is still not as slow as the slowest from the open-source players. And again, like with the other metrics, Player Web X’s median value for source switching outperforms the median values for the other players.

It also has to be mentioned that for all three test metrics, the fastest Player Web X time is faster than the quickest time for all of the open-source players.

For the second round of testing, we ran the same three tests on a 2021 Samsung Tizen SmartTV, and the correlating results can be seen below.

Graph of each video player’s performance on Samsung Tizen 2021 SmartTV

For the second round of testing, we ran the same three tests on a 2021 Samsung Tizen SmartTV, and the correlating results can be seen below.

Test for video seeking time taken between the Bitmovin Player Web X, HLS.js, and Shaka Player

Test for video startup time taken between the Bitmovin Player Web X, HLS.js, Video.js, and Shaka Player

Test for source switching time taken between the Bitmovin Player Web X, HLS.js, Video.js, and Shaka Player

On this device, Player Web X still performs well compared to the other open-source players. It consistently outperformed Shaka player on average on all tests. However, there is a clear area for improvement for Player Web X when compared to HLS.js on this SmartTV device, as across the 3 different tests, HLS.js performed better when compared to Player Web X. We have identified that this is due to two factors: Player Web X parsing is not yet optimized for devices with less powerful hardware like SmartTVs, and the player architecture is based on a heartbeat (using setInterval). Taken together, this leads to delays that are more noticeable on Smart TVs. Both these factors are to be resolved as we continue to improve our codebase, including the plug-ins used in these tests.

Plug-in Marketplace

Modern services require a large number of features and integrations simply to keep up with the conventional experience modern consumers expect. Many streaming companies often feel they may have to fragment their own service in order to accommodate specific features on different devices.

That’s why for Player Web X, we’re creating a new plug-in system to create a more flexible and expansive framework to help clients using the Bitmovin Player, regardless of their use cases. This system will give development teams more control over what is included in their deployed player bundle, removing the need for any unnecessary bloating.

The plug-in system is an extension of the approach we took in Bitmovin Player Version 8 with the module system. However, it is far more extensive, as rather than having modules that extend the player, the plug-in system is built into the framework that underlies Player Web X, meaning that the player itself is built of plug-ins, which can be overridden or extended. This will allow for far more granular and powerful solutions to various use cases.

Additionally, in order to allow our customers to support their own use cases, we will be releasing an open-source plug-in template. This template will enable our clients, partners, and developer community to create their own plug-ins for Player Web X and enhance their service to achieve an optimal and unique viewer experience. This is particularly powerful for teams that want to have the flexibility of an open-source web player with the performance and stability of a commercial player.

Player Web X’s Current Stage and Next Steps

Player Web X is currently in alpha testing with some of our existing partners to help us on the road to making it an MVP. At IBC2023 in September, we will release more interesting updates on its progression and where we are at in the process. In the meantime, if you’d like to become an early adopter or would like more information about any details in this blog post, please get in touch.

Also, if you’d like to see how Bitmovin’s solution stack can benefit your streaming workflow – sign up for our 30-day free trial.

The post Player Web X – A New Player for a New Era appeared first on Bitmovin.

Bitmovin releases dedicated Player SDK for Roku Devices

Jacob Arends — Mon, 05 Dec 2022 17:05:06 +0000

What have we built?

We have built and released a dedicated Player SDK for Roku. This solution is designed to enable developers to be able to work with Roku devices without needing deep technical knowledge of the Roku playback setup and removing the need for heavy lift development efforts in building out functionality for Roku devices.

What are the Challenges and Why have we built/released this?

Roku has become an essential platform for OTT companies to be on as it’s viewership has grown rapidly, with monthly active users almost doubling from 30.5 million in Q2 2019 to 63 million Q2 2022 (source: Statista, Nov 2022).

However, Roku uses its own dedicated technology for playback and this presents a few interesting challenges; we had a number of questions when defining the problem and designing how we planned to address the challenges.

To start with, “do you have a dedicated in-house resource that specializes in the Roku setup and ecosystem?” Generally speaking, we’ve found that for most, it is a challenge when attempting to transfer over commonalities and the experience from other environments you’re deployed on. In addition to this, some would argue that the Roku ecosystem has its own specific set of difficulties that require a significant level of depth and understanding of the Roku setup. A perfect example of this is their use of their own proprietary coding language called ‘BrightScript’.

This brings on question number 2, “have you had trouble in finding developers with deep technical expertise and experience with the Roku setup and ecosystem?” As this type of experience is not easily found, what we do know is that any advancements to support Roku developers are always very positively received.

We’re making it as simple and easy as possible to get started, here’s how…

If you are already utilizing Bitmovin’s Player SDKs, you may already know that you won’t need to learn or create new Bitmovin Player configuration formats for each new device, as you’ll be able to easily migrate and reuse the configs from your existing deployments.

Added functionality?

The additional questions we look to answer with our dedicated Roku SDK include the following:

“How easy has it been for you to integrate with Roku Advertising Development?”
“Have you been able to seamlessly get started and monetize your inventory, measure accurately and optimize quickly, at scale and without heavy lifting?“

To sum up the answer to both questions, our Roku SDK extends to the Roku Advertising Framework (RAF) and our Bitmovin Player is able to handle the workload required in making your deployment RAF compliant, leaving your development team with more time to work on other product-defining components. By bundling in additional features like metadata handling and 3rd party SDKs, like Google’s IMA SDK for Dynamic Ad Insertion, we’re saving more developer time and resources who otherwise would have needed to custom-build any required features on top of the native player.

Roadmap plans

For the next iterations of our Roku SDK, the following have been planned:

Additional advertising capabilities, including SSAI functionality,
The ability to stream live
Low Latency functionality

How to get started?

The best way to get started today is to jump into the Player Dashboard and sign up for a trial. In the dashboard, you’ll be able to find all of the developer resources, API guides, tutorials and more. If you’re already using one of Bitmovin Player SDKs and looking to expand to utilizing the Bitmovin Roku SDK, you will find the unified developer experience of Bitmovin’s player means developers are not needing to re-learn how to configure the player in a new way for each device and can transfer knowledge and configurations from existing players.

The post Bitmovin releases dedicated Player SDK for Roku Devices appeared first on Bitmovin.

Bitmovin Launches Support for React Native

Jacob Arends — Mon, 21 Nov 2022 16:01:24 +0000

React Native has become one of the most popular UI frameworks for mobile development and continues to see widescale adoption. Over the past year, we have seen rapidly growing interest from companies looking to stream video in their mobile applications with the Bitmovin Player. This topic has also been trending in the Bitmovin developer Community for months, where community members have even shared their bridging code for the Bitmovin Player for other customers to use. With all this enthusiasm around this framework, we are excited to announce that we have launched an official open-source React Native wrapper for the Bitmovin Player.

For context, React Native, along with ReactJS, have changed how developers create mobile and web applications, and this latest release means that we now have official support for the pair. Both frameworks are the fastest growing for their use cases because they are easily customizable, allow engineers to deploy on many more devices than they otherwise would, and are JavaScript and TypeScript based. This means developers aren’t required to learn or have previous experience with native mobile platforms to launch an application and can even share code between their web and mobile applications.

Now, why is this important for developers?

Device fragmentation is a problem every video streaming service faces when trying to reach wider audiences. React Native’s cross-device compatibility means companies won’t require separate engineering teams for iOS and Android development, empowering smaller teams to support more devices. This enables devs to quickly deploy our industry-leading Player and provide the best viewing experience for users across mobile devices. If development teams use React Native, they can dramatically improve their time-to-value in terms of launch speed, development time, and associated costs. Additionally, research shows that using our Player further cuts down on the dev time required, helping you save over 600+ hours each year on maintenance-related updates for Android and iOS alone (the equivalent of 2 full-time developers!).

With the React Native wrapper bridging our iOS and Android SDKs, engineers can create applications for more than just mobile devices. Our Player SDKs can also be used for applications on tvOS, AndroidTV, and FireTV, giving React Native developers the option to reach audiences in their living rooms. Using React Native for iOS and Android in combination with ReactJS for web means customers playing video with our Player can use the Player SDKs and expand their service to a vast range of devices, using only JavaScript (or TypeScript).

What are the use cases and features that come with React Native support?

With the need to stream live or on-demand video content, many industries looking to add video streaming capabilities to their workflows now can. Dev teams for companies within eLearning, fitness, eCommerce, and other sectors that may not have extensive streaming knowledge can utilize our Player to fit their use cases. Already, our React Native wrapper contains support for DRM, subtitles, and closed captions, which are crucial for content protection and accessibility requirements. Devs will also be able to take advantage of the Player UI and comprehensive event system for all Player and Playback state changes. For the next update, we’re hoping to release support for client-side advertising to allow our clients to monetize their content however they wish.

Get involved!

As this is an open-source project, we have received and are actively accepting community pull requests, so please feel free to contribute by creating a branch in GitHub with any customizations. Our video experts will review your contribution and integrate it into the library. Also, let us know in our developer community what features we should work on next by creating a new topic in the forum.
Additionally, test out the Bitmovin Player and every feature we offer by signing up for our 30-day free trial. Trial users also get complete access to our other solutions, such as VOD and Live Encoding, Analytics, and Streams.

The post Bitmovin Launches Support for React Native appeared first on Bitmovin.

Jacob Arends – Bitmovin

Open-Source vs. Commercial Players: Understanding the True Cost of Ownership

Pros & cons of choosing an open-source player:

Pros & cons of choosing a commercial player:

TCO: Comparing open-source to commercial players in 3 scenarios

Person-Months definition:

Scenario 1: Browser-Based Streaming Service

Factor 1 – Time to Market – Feature Aspects:

Factor 2 – Time to Market – Adding QA and Event tracking:

Factor 3 – Annual Maintenance:

Total time saved by utilizing Bitmovin’s Playback solutions

Scenario 2: Multi-platform Streaming Service

Factor 1 – Time to Market – Additional devices:

Factor 2 – Time to Market – Monetization:

Factor 3 – Annual Maintenance:

Total time saved by utilizing Bitmovin’s Playback solutions

Scenario 3: Enterprise Streaming Service

Factor 1 – Time to Market – Additional devices

Factor 2 – Time to Market – Additional Features

Factor 3 – Annual Maintenance:

Total time saved by utilizing Bitmovin’s Playback solutions:

Summing up the scenarios

A solution that fits the best of both worlds

The Ultimate Guide to HTML5 Video Players [2024]

Table of Contents

What is an HTML5 video player?

History of HTML5 video players

First, there was Flash

Then came the push for plugin-free video technologies

The HTML5 video player became the future of streaming

Benefits of video streaming with an HTML5 video player

How to choose an HTML5 video player: 10 Key features

Integration effort

Customization

Device and browser coverage

Performance

DRM support

Advertising support

What ad architecture are you using today?

Adaptive bitrate (ABR) playback

Subtitle and audio tracks

Third-party integrations

Testing and analytics

Free and open-source vs. paid video players

What’s more common: open-source vs. commercial video players

How many hours per month does your development team spend on maintaining your video player solution?

Evaluating Quality of Experience (QoE)

Measuring ROI of your online video player

Video player security issues

Video player software development kits (SDKs)

Branding and customizing your video player

When is an open-source video player the best option?

Top 4 free and open-source video players in 2024

Shaka Player

Key features:

Pros:

Cons:

Video.js

Key features:

Pros:

Cons:

Dash.js

Key features:

Pros:

Cons:

HLS.js

Key features:

Pros:

Cons:

ExoPlayer

Key features:

Pros:

Cons:

AVPlayer

Key features:

Pros:

Cons:

Bonus: A look at Bitmovin Video Player

Key features:

Compatibility: