In this blog, we’ll explore SGAI and highlight its characteristics, workings, and comparisons to other ad insertion methods, such as client-side and server-side. You’ll also discover how SGAI can help increase platform ad revenue by improving targeting, minimizing interruptions, and reducing the impact of ad blockers. Let’s get into it.

What is Server-Guided Ad Insertion?

Server-guided ad Insertion (SGAI) is a hybrid method that combines client-side and server-side ad insertion strengths. It helps stream ads seamlessly into video content while keeping the viewer experience smooth. The server guides the process through SCTE-35 markers which help dictate where ad breaks can occur, while the client (the viewer’s device) handles the actual stitching and playback of the ad content, which ensures that ads are displayed at the right moments without causing issues with the stream. To be clear, a player that has this integrated within its capability, such as the Bitmovin Player, is necessary to take advantage of SGAI. 

This approach allows for more personalized and targeted ads. Instead of pre-inserting ads into the content (as with traditional server-side methods), SGAI enables real-time decision-making, where ads are selected based on the viewer’s location, preferences, and behavior. Streaming services can deliver more relevant ads to each user, boosting engagement and improving the overall experience.

How Does Server-Guided Ad Insertion Work?

The process behind SGAI involves the server working closely with the client device to ensure that ad delivery plays well and doesn’t interrupt the user. As highlighted above, SCTE-35 markers are necessary when implementing SGAI into the streaming workflow. Here’s a step-by-step breakdown of how it works:

1. Manifest Creation:
   The server creates a manifest with SCTE-35 makers that outlines when and where ad breaks can occur during the content stream.
2. Ad Request:
   When the viewer reaches a specific ad break, the client device sends a user-specific request to the ad server. The server selects an appropriate ad to return based on the viewer’s profile or other targeting data.
3. Ad Playback:
   The client device will then handle the ad insertion, formatting, and playback of the ad, ensuring instant transitions between the ad content and the main content without causing delays or stream issues.

This system allows streaming services to dynamically insert ads on the client, offering a more tailored viewing experience without the technical hiccups often found in traditional methods.

Types of ads used in SGAI

Streaming platforms are able to integrate a wide variety of ad formats that suit their content needs and allow for flexible and dynamic ad placements, maximizing engagement without disrupting content flow. SGAI facilitates the expected pre-roll, mid-roll and post-roll ad positions while also integrating more modern multiview ad formats such as:

• L-bar Ads
• Side-by-side Ads
• Picture-in-Picture Ads
• Overlay Ads 
• Companion Ads

These formats are particularly popular in sports streaming use cases as they help keep the viewer watching while not being disruptive to their experience. This also enables platforms to leverage specific ad behavior, such as interactive, skippable and non skippable ads and captialize on more relevant ads within their viewers sight.

The image above shows an example of how the ads look within multiview playback, where viewers can continue watching their favorite content without having a disrupted experience.

Benefits of SGAI for Streaming Platforms

SGAI has several advantages over other options, particularly regarding ad delivery and revenue generation. It brings the best of both the CSAI and SSAI without the headache of their flaws. Here is a breakdown of the benefits and what it can do to help generate more revenue:

Benefits for playback

• Improved user experience:
  • SGAI ensures a more seamless transition between content and ads, reducing the likelihood of buffering or delays, which keeps viewers happy and engaged.
• Enhanced ad personalization:
  • Since SGAI allows for real-time ad selection, ads can be more relevant to each viewer, leading to higher engagement and better overall ad performance.
• Bypassing ad blockers:
  • Unlike CSAI, where ad blockers are a major challenge, SGAI’s hybrid approach makes it harder for ad blockers to detect and prevent ads, ensuring a higher percentage of ads are delivered.

Benefits for increasing revenue

• Higher engagement:
  • Personalized ads are more likely to be watched and engaged with, leading to higher click-through rates and better conversion.
• Increased Ad Viewability:
  • By reducing the risk of ad blockers, more ads actually reach their intended audience, which increases impressions and viewability.
• Better Targeting:
  • The real-time personalization that SGAI offers leads to more relevant ads, which are not only more likely to be watched but also more valuable to advertisers. This allows platforms to charge higher rates for more effective ad placements.

SGAI vs. SSAI (Server-Side Ad Insertion)

Server-side ad Insertion (SSAI) involves the server stitching ads directly into the video stream before delivering it to the viewer. While this method is effective at avoiding ad blockers, it has limitations in terms of real-time personalization. Since ads are pre-stitched into the stream, SSAI lacks flexibility when it comes to selecting ads based on the viewer’s current context or behavior.

In contrast, SGAI allows for dynamic ad selection and personalization. The server guides the ad opportunities, but the client plays an active role in deciding which ad to display at the exact moment of playback. This real-time decision-making allows for more tailored ads, which are more likely to resonate with viewers and keep them engaged.

SGAI vs. CSAI (Client-Side Ad Insertion)

Client-side ad Insertion (CSAI) relies on the user’s device to handle every part of the ad process, from requesting the ad to playing it. While CSAI allows for interactive or clickable ads and can offer immediate viewer data, it is more prone to issues like buffering, noticeable transitions, and, more importantly, ad blockers. Because the client manages the entire process, ad blockers can easily detect and prevent ads from being shown.

SGAI reduces these risks by distributing responsibilities between the server and the client. The server owns the ad decisioning process to maintain a scalable and refined experience, while the client takes care of stitching the ad in alongside the main content at the right moment. This results in a more continuous experience for viewers and significantly reduces the chances of ads being blocked, making it a more reliable solution than CSAI.

Detailed breakdown of each ad insertion method

To get a better understanding of how SGAI compares to other ad insertion methods, here’s a breakdown of key features across CSAI, SSAI, and SGAI and what they do for the user experience:

Wrapping up

SGAI is being talked about more and more in the industry, especially at IBC, with many streaming platforms showing interest in how it can improve their ability to generate more revenue and keep their viewers engaged. By combining the best aspects of client-side and server-side approaches, SGAI ensures better ad transitions, personalization, and a stronger defense against ad blockers that typically make platforms get creative so they can still earn from their content. For streaming services aiming to boost ad revenue while keeping viewers happy, SGAI offers an effective solution that enhances engagement and monetization. This is why platforms adopting SGAI will be well-positioned to provide a premium, uninterrupted experience while maximizing their advertising potential.

The post SGAI Explained: The Future of Ad Delivery in Streaming appeared first on Bitmovin.

What is Multiview?

At its core, Multiview lets users view multiple video streams simultaneously on a single screen. This feature can be deployed in three ways:

1. Viewing different streams simultaneously: This allows users to stream multiple sports events at the same time, ensuring they catch every critical moment across each event without missing a beat.
2. Viewing the same scene from different angles: Consider the excitement of viewers watching two drivers in their favorite racing series chase each other down the track, with the ability to switch between different camera angles or even driver perspectives in real-time.
3. Viewing ads alongside the main event: Expanding monetization opportunities by allowing ads to be shown dynamically alongside event coverage. Ads can be shown during play and during scheduled ad breaks. Ads can also be tailored to the content, for example, to match the brands & sponsors visible in the coverage at any given time.

These use cases enhance the viewing experience and empower users and platforms to curate how they engage with content. Whether sports enthusiasts want to follow multiple games or viewers look to experience events from various perspectives, Multiview brings a new level of interactivity.

The Benefits of Multiview

The Multiview feature unlocks a lot of possibilities for both viewers and streaming platforms:

• Enhanced engagement and boosting subscribers: Multiview keeps audiences more engaged and allows platforms to provide premium offerings by enabling viewers to watch multiple streams simultaneously. Whether following different angles of a live event or tracking several matches simultaneously, this feature ensures that viewers are more involved and less likely to churn.
• New Revenue Streams: For businesses, Multiview can be a compelling addition to premium subscription tiers. It offers a unique value proposition that can drive subscriptions and, potentially, ad monetization, as more screens mean more opportunities for ad placements. Additionally, through the Bitmovin Advertising Module (BAM), platforms can utilize different ad placements such as L-bar and picture-in-picture, enabling users to continue watching while increasing their ad revenue.

Example of how Multiview ad playback would look with a video and a video on one screen.

• A social viewing experience: Multiview also fosters a more social viewing experience. This enables businesses and groups of friends to stream different parts of a game or event together on a single screen—each with their preferred angle or game, but all are still part of the same shared experience.

The Challenge of Multiview on Different Platforms

However, delivering Multiview functionality has its challenges. For higher-powered devices, deploying a small number of video players simultaneously may be possible. However, reliably streaming with more than 2-4 streams simultaneously and on devices such as most TVs, which typically have only one video decoder, presents a significant hurdle. These devices can generally only display one active video stream at a time, making using multiple players to stream different videos simultaneously unfeasible.

The solution lies in the concept of “tiled” streams. A tiled stream is a single video feed composed of multiple smaller “tiles,” each representing a separate stream. This method allows for multiple videos to be viewed simultaneously, even on devices with technical limitations, by encoding all desired streams into a single composite feed, which can be done on the server-side or client-side.

Typically, we’ve seen this done on the client-side by other offerings on the market, making their players heavy, overly complex and causing problems on low-power devices such as delayed startup time or buffering. This all limits the feature set available and the speed of supporting new devices in future.

How Bitmovin is enabling customers through the Multiview Player feature

Multiview is the latest Player feature we’ve seen a growing interest in from the streaming platforms we support. Here’s how it works:

• Tiled stream creation: Our integration with the Bitmovin Live Encoder allows for seamless tiled stream encoding within our solutions. This process creates a mosaic of multiple video streams combined into one, and all are handled server-side for optimal performance and efficiency.
  • Where Bitmovin innovates: For Bitmovin, this piece is done server-side, ensuring the Bitmovin Player stays lightweight and keeps playback on all devices as stress-free as possible.
    

Example of how Multiview playback looks with 4 streams side-by-side on the Bitmovin Player.

Example of how Multiview playback looks with 4 streams – one main one and 3 by its side on the Bitmovin Player.

• Secure and seamless user experience: The Bitmovin Player, integrated with every major DRM for superior content security, enables playback of this tiled stream, allowing users to select any tile of interest. When a tile is selected, the Player seamlessly switches to the high-resolution version of that stream, continuing playback without interruptions.
  
• More revenue-generating possibilities: With Bitmovin’s Advertising Module, platforms can implement a wide variety of ad formats alongside the event stream, enabling them to provide a better user experience and generate more revenue. This includes new ad experiences like picture-in-picture, L-bar, and side-by-side. These layouts increase the number of potential ad spots and allow ads to be matched with the event coverage, for example, showing brands that are visible in the stadium or from celebrity endorsers who are attending the game.
  
• More devices supported: Bitmovin’s Player supports the broadest range of devices on the market, meaning platforms can deploy this feature on every device they are streaming on. This approach ensures a smooth and intuitive user experience and maximizes compatibility across various devices, from high-end smart TVs to everyday mobile phones.

The Road Ahead

While Multiview’s potential is already immense, there are also possibilities to optimize it further, such as reducing the complexity of customizing tiled streams. We are actively exploring ways to optimize this process, possibly by reusing existing streams to avoid the need for additional encoding. 

New standards are emerging, like SGAI, which brings new possibilities for signaling ad placement in multiview. Multiview video players can use SGAI information within the stream to show ads in the best possible locations to maximize monetization potential, beyond simple ad breaks.

The future of Multiview is bright, particularly in live sports streaming—a key market for Bitmovin. As major platforms like YouTube TV roll out their own Multiview capabilities, it’s clear that this feature is set to become a standard expectation among viewers.

Why Multiview Matters

For Bitmovin and our clients, Multiview is more than just a technological advancement, it’s a strategic necessity. As the streaming landscape becomes increasingly competitive, the ability to offer unique, engaging experiences like Multiview will be critical in retaining viewers and attracting new ones. For sports broadcasters and streaming services, particularly, Multiview offers a way to stand out in a crowded market, providing fans with the immersive, customizable experiences they crave.

At Bitmovin, we’re not just responding to industry trends but shaping them. By continuing to innovate and pushing the boundaries of what’s possible in streaming technology, we’re ensuring our customers can deliver the next generation of viewing experiences.

Want to check it out?

Want to see Multiview in action? It is a standard offering with the Bitmovin Player and will be deployed soon. Still, while it’s not available for general use, we’re excited to offer demos and discuss how this feature can benefit your streaming service. Contact us today to learn more.

The post Unlocking the Power of Multiview Playback – The Future of Immersive Streaming appeared first on Bitmovin.

Video is integral to digital experiences. Whether end-users are scrolling through social media, binging content on their connected TV, or sweating it out to an online fitness class, streaming now plays a central role in driving online engagement. 

But building video into products and services is tough. Businesses need robust streaming infrastructure to store, encode, manage, deliver, and analyze video content. Plus, most dev teams have expertise in their company’s core competency rather than back-end video technology. 

That’s where online video platforms (OVPs), video streaming application programming interfaces (APIs), and software development kits (SDKs) come into play.

Think of OVPs as all-in-one solutions. They offer a comprehensive suite of tools to manage your entire video workflow, from ingestion to analytics. These are ideal for businesses needing a user-friendly platform with minimal development effort. But if your requirements go beyond simply uploading and sharing video content, OVPs may be a poor fit.

APIs, on the other hand, provide granular control. They act as messengers, allowing you to integrate specific video functionalities like playback, encoding, or analytics into your existing applications. APIs are perfect for developers seeking the flexibility to develop advanced applications, without having to start from scratch.

Finally, SDKs are pre-built toolkits designed for integrating specific video features into mobile and web applications. They save development time by offering all the building blocks for a specialized language or task — like deploying your HTML5 player on Roku. 

SDKs are often used in conjunction with APIs and OVPs. For this reason, it’s not always a question of OVP vs. API vs. SDK, but rather which combination of technologies is best for your business.

Acronyms abound in the alphabet soup that is video streaming. But don’t worry. In this guide to OVPs, APIs, and SDKs, we define each term and explore which option is best depending on your use case. From there, we recommend the top products in each category for business leaders and software developers alike.

Technical requirements for deploying online video

Before getting into it, let’s nail down the capabilities and features needed to integrate video into your product and look at how OVPs, APIs, and SDKs support these requirements.

Encoding and transcoding 

Encoding and transcoding are often used interchangeably, but they refer to two distinct steps. Encoding involves converting RAW video into a compressed digital format directly after the video source is captured, while transcoding employs a digital-to-digital conversion process to prepare and optimize video content for distribution to end users.

Most online video content has been both encoded and transcoded before it reaches viewers. These processes are what make it possible to deliver bulky video over the internet and ensure smooth playback across a variety of devices. 

Transcoding is a critical capability that’s supported by all major OVPs and APIs. What differs, though, is how advanced and flexible different platforms’ transcoding features are. Most OVPs take a one-size-fits-all approach. This means the video bitrate, frame rate, and other technical parameters are predefined and all streams are prepared in the same way.

APIs, however, offer more control over transcoding configurations without having to access a dashboard. This allows developers to configure encoding settings and use a variety of protocols and codecs. The process of uploading videos is also automated with APIs, whereas OVPs generally require manual uploads through the interface. Finally, some encoding solutions offer per-title encoding/transcoding capabilities. 

With per-title encoding, the settings are customized to each video. We designed the Bitmovin Per-Title Encoding solution to automatically analyze the complexity of every file and create the ideal adaptive bitrate (ABR) ladder depending on the content. This ensures high-quality viewing experiences and efficient data usage by creating dynamic bitrate ladders on a case-by-case basis. The player can then select from multiple bitrates based on network and computing resources available. 

One additional item is that you can deploy Bitmovin’s VOD and Live encoders on your infrastructure within any major cloud provider using Bitmovin’s Cloud Connect feature. This helps maintain the highest cost efficiency and use Bitmovin’s infrastructure through its managed service.

Read our Video Encoding Streaming Technology Guide to learn more.

Storage

Video accounts for the majority of the internet’s traffic. As such, it’s no surprise that CDN and storage bills make up the biggest operating expenses for OTT providers. The best way to minimize these costs is through technologies like per-title encoding, so you’ll want to consider how different components of your workflow impact one another when evaluating OVPs and APIs.

A Forrester study found that Bitmovin customers running their encoding in the cloud saw a 355% ROI over a three-year period.

Other factors to think about that impact storage costs include the anticipated volume, geographic distribution, and integration efforts. Many OVPs offer built-in storage solutions as part of their platform to simplify management. This provides a centralized storage system within the platform, but it’s difficult to tailor it to your specific storage requirements.

Streaming video APIs offer a more customizable approach to storage, including the ability to integrate with popular cloud storage providers like AWS, Microsoft Azure, and Google Cloud. This means developers can adapt the approach based on their scalability and geographic redundancy needs, and also optimize storage costs based on their existing workflows.

Distribution

Video delivery comes next, which is made possible by Content Delivery Networks (CDNs) like AWS, Akamai, Microsoft Azure, and Google Cloud Marketpalce. These networks of interconnected servers ensure efficient video distribution across the world. 

Most OVPs have multiple CDNs built-in, whereas APIs often give users the flexibility to deliver streams on their own CDN. With Bitmovin, you can do either, ensuring both customization and easy workflow configuration. 

Playback

Video players are essential components 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, making player control critical to the workflow.

HTML5 players can be built from scratch using an open-source option or deployed and customized using a solution like the Bitmovin Player. The same goes for deploying native players for iOS and Android. Going with a pre-built option provides access to advanced features like adaptive bitrate playback, DRM support, monetization capabilities, and interactive playback controls. 

Software development kits (SDKs) also play a major role in streamlining support for a range of devices and mobile applications by providing platform-specific integration tools. This helps organizations scale their solution and ensure a high-quality viewing experience for their audience without requiring significant development time. 

OVPs always have integrated video players as part of their platform, but they may lack the flexibility and customization required for branding or integrating unique playback features.

Read our Ultimate Guide to Video Players to learn more.

Analytics

Even the most straightforward streaming workflows have hiccups. As such, insight into video performance and quality of experience is a must. Organizations need the ability to pinpoint issues before they impact their audience, gain actionable insight into viewer behavior, and optimize resource utilization with visibility across the video streaming pipeline.

OVPs typically provide basic metrics like views, watch time, and completion rate. Some take this even further with heatmaps and click-through rates. For deeper insight, though, APIs are the way to go. 

With API access, you can gain insights into a wider range of data points, including:

• Error tracking
• Stream performance
• Advertising metrics
• Viewer demographics
• And more.

With Bitmovin’s Analytics, organizations can actively track more than 200 data points in real time and see how their streams compare to industry benchmarks. They can view performance within the Bitmovin Dashboard or utilize the Analytics API to get more granular insights which can then be pushed to major data aggregator platforms, such as Grafana, Looker Studio, AWS S3, and others for a more holistic view.

Online Video Platforms (OVPs)

Now that we’ve explored the primary requirements of video streaming — encoding and transcoding, storage, distribution, playback, and analytics — let’s dive into online video platforms (OVPs) and the best options for businesses.  

What is an OVP?

Online video platforms, or OVPs, are the prefabricated homes of video streaming. They act as turnkey solutions for managing, distributing, and monetizing online video content — eliminating the need for technical expertise or third-party integrations.

With an OVP, you get it all. The content management system (CMS), HTML5 video player for web-based devices, native players for mobile experiences (sometimes), and monetization tools are built in. This is great for businesses that want an effortless solution, but customization can be limited. It’s difficult to tailor OVPs to unique business models or existing workflows. As such, OVPs are better suited for building your business’s online presence across a dedicated channel, simple video workflows that don’t need to be fine-tuned, and hosting small content libraries on your website. 

OVP benefits

OVPs act as an all-in-one streaming platform for businesses with limited developer expertise and straightforward requirements. The benefits include:

• Turnkey solution: If you’re looking to host an online streaming event, embed content on your website, or use video for employee communications, OVPs are the quickest way to get started.
• Low cost of entry: OVPs are affordable and sometimes even free. They are also a great way to test interest among your user base before investing developer resources into building out a more comprehensive solution.

OVP cons

Because OVPs are designed for simple streaming workflows, businesses are limited to the tools and capabilities built into these platforms. This means that if you’re trying to build something specific, like an esports platform or fitness app, you’d be better off with an API. 

• Limited functionality: Advanced features and specific functionalities like low-latency streaming, VR & 360, and ad insertion are often missing from OVPs.
• Lacking control: Because OVPs control every step of the streaming workflow — including the encoding technology, CDN, and player — businesses using OVPs don’t have the same control over their infrastructure. 
• Missing insight: OVPs offer basic analytics capabilities. However, businesses requiring detailed insight into viewer behavior and stream performance would be better off with a streaming analytics API.

What to look for in an OVP

If an OVP makes sense for your business or video project, you’ll want to evaluate the following aspects of selecting a vendor:

1. Ease of use: Convenience is the name of the game with OVPs, so you’ll want to pick something with an intuitive user interface (UI). The goal is to streamline tasks like uploading, managing, and distributing video content for non-technical users.
2. Feature set: Essential features like uploading and sharing content, embedding video on your website, and the ability to stream live content should be table stakes when comparing providers. From there, in-depth analytics, the ability to customize the viewing experiences, and advanced encoding capabilities help set some OVPs apart.
3. Scalability and flexibility: If you’re planning for growth, you’ll want to choose an OVP that can scale with your business. Some OVPs offer APIs to accommodate future expansion, eliminating the need to migrate to a more flexible solution. 
4. Reliability and performance: Assess the uptime guarantees, server stability, and service level agreements of each option. Additionally, look for features like adaptive bitrate streaming, integration across multiple CDNs, and global delivery capabilities to ensure smooth playback for viewers worldwide.
5. Security measures: Content protection is key for use cases like corporate communications or streaming premium content to subscribed viewers. Encryption, access controls, and digital rights management (DRM) all help to this end.
6. Customer support: Assess the level of customer support provided by the OVP vendor, including tutorials, technical assistance, and dedicated account management. Look for a vendor that offers responsive support channels and comprehensive resources to help you maximize the capabilities of the platform.

Best OVPs for businesses

You’re likely familiar with leading brands in the OVP space. YouTube, Vimeo, and Bitmovin’s Streams are three popular examples. Here’s a look at how they compare. 

YouTube

As one of the most recognizable names in online video, YouTube needs no introduction. The platform allows users to upload, view, share, and comment on videos within its platform. Businesses can also use YouTube to embed videos on their website, but YouTube branding and advertisements make this a less-than-ideal application. Monetizing the content is also restrictive, as is content security. 

Most businesses use YouTube as a way to build their online presence rather than support their video infrastructure. For that reason, it’s often categorized as a social media channel rather than as an OVP. 

Marketers and businesses shouldn’t sleep on YouTube. However, creating video-powered products and services requires taking a different approach.

Vimeo

Vimeo offers tools for making, managing, and sharing videos. The platform lets businesses and creators host virtual events, webinars, and other marketing-focused experiences. It also provides the functionality to live stream to multiple social channels and websites simultaneously.

Vimeo offers limited monetization tools and often drives traffic to vimeo.com rather than your business’s website. That said, the platform delivers ad-free experiences and more end-user customization options than YouTube.

Marketers looking for a simple way to embed video on their website and live stream across multiple platforms may want to give Vimeo a try. But if you’re serious about building native video experiences that live entirely on your owned digital properties, you’ll want a more business-oriented OVP like Bitmovin’s Streams. 

Bitmovin’s Streams

Bitmovin’s Streams helps simplify streaming for businesses, serving as a single platform for live and on-demand encoding, CDN delivery, video playback, analytics, security, and more. As an end-to-end solution that’s built for the cloud, it eliminates the complexity of building your streaming infrastructure in-house. 

Features supported by Streams include:

• Flexible video uploading and encoding for on-demand content
• Live streaming and transcoding
• Drag-and-drop Player customization
• Simple sharing and easy-to-use embedding
• In-depth analytics
• WordPress plugin for quick integration
• Content protection with Signed URLs and domain restrictions

Streams also has a simple API for organizations looking for greater control, which brings us to the next section.

“Streams is one of our most important launches to date because it helps new media companies deliver high-quality streams to audiences simply and efficiently. New media companies typically have smaller developer teams that don’t have the time and capacity to get familiar with the complexities of video streaming. Therefore, there is a clear market need for a straightforward, low- or no-code solution like Streams that removes the complexity of video streaming to deliver content at speed and scale.

Demand for video streaming has grown at an incredible rate in recent years, all of which has been underpinned by extraordinary technological advancements. However, there now needs to be a greater focus on making innovations work in a simpler, more user-friendly way so video streaming can truly become ubiquitous, to enable everyone to build video products on the same level of quality and experience as the big names like Netflix.”

– Stefan Lederer (CEO, Bitmovin)

Video Streaming APIs

APIs, or application programming interfaces, are essential tools in every developer’s toolkit. They provide the flexibility to develop advanced apps while hiding the complexity behind the scenes. Here’s a look at the role they play in the world of audio and video streaming.

What is a video streaming API?

Video streaming APIs connect developers to streaming platforms like Bitmovin using code. Unlike traditional user interfaces (UI) found on video platforms like YouTube, APIs offer programmatic access to a wide range of features and capabilities, empowering developers to build customized streaming experiences tailored to their specific needs.

Without video APIs, businesses looking to deploy unique and innovative video applications would have to start from scratch. In this way, APIs speed things up significantly. Many developers elect to use video APIs to support a wide range of functionality for creating, customizing, and controlling video workflows. 

Some platforms that offer APIs can also be managed via a no-code UI. This is a great middle ground. While the UI might not provide the same level of control and customization, API access is available should the business need it. 

APIs impose almost no limits on the external services and functionality that you can integrate into your application while speeding up development through access to core services like encoding and playback.  

How do video APIs work?

Video APIs act as intermediaries, facilitating communication between the developer’s application and the underlying streaming infrastructure. In doing so, APIs hide the intricacies of online video distribution, letting developers focus on the products they’re building. 

Here’s what takes place behind the scenes when using a video streaming API.

1. Establishing communication: Video APIs create channels for developers to interact with the underlying video streaming platform. These channels typically operate over HTTP or HTTPS protocols, allowing for secure data transmission.
2. Authentication and authorization: Before accessing the functionalities offered by the streaming video API, developers need to authenticate themselves and obtain appropriate authorization. This is often achieved through the issuance of API keys or tokens, which verify the identity of the requesting user.
3. Requesting services and data: From there, developers can use video APIs to request various services and data from the streaming platform. This may include tasks such as uploading video content, initiating encoding or transcoding processes, retrieving playback URLs, or fetching analytics metrics.
4. Processing requests: The video API then processes these requests by interfacing with the backend infrastructure of the streaming platform. This involves executing the requested operations, such as encoding/transcoding video files into multiple formats, storing content in designated locations, or generating playback manifests.
5. Handling responses: After processing requests, video APIs generate responses containing the results of the requested operations. These responses are returned to the developers in a standard data format like JSON or XML. 
6. Monitoring and management: Video APIs often include functionalities for monitoring and managing video assets and workflows. This may involve querying the status of ongoing encoding jobs, adjusting playback settings dynamically, or accessing real-time analytics data to gain insights into viewer behavior.
7. Ensuring reliability and performance: Video APIs prioritize reliability and performance to ensure smooth and uninterrupted video streaming experiences. Mechanisms for fault tolerance, load balancing, and adaptive bitrate delivery help handle varying levels of demand and end-user bandwidth and mitigate potential disruptions.

Types of video streaming APIs

Streaming APIs are often broken out by the specific capabilities they support. As such, you may hear references to more nuanced services like a live video streaming API or video analytics API. The names are self-explanatory, but let’s touch on how they compare.

VOD encoding APIs

Video-on-demand (VOD) encoding APIs take source files and convert them into adaptive streaming formats like MPEG-DASH and HLS for adaptive bitrate delivery. They also create thumbnails, subtitles, and other metadata. But that’s not all. When using Bitmovin’s encoder, you benefit from per-title encoding capabilities, multi-codec streaming, and HDR support as well.

Capabilities to look for in a VOD encoding API:

• Multi-codec and format support
• Adaptive bitrate delivery (ABR)
• Per-title (also called content-aware) encoding
• Thumbnail and metadata generation
• Cloud-based processing
• Advanced features like DRM protection and ad insertion
• Integrations with your existing cloud storage, CMS, or analytics platforms

Live streaming APIs

Broadcasting live video online is no simple task. Unlike video-on-demand (VOD) encoding APIs, which focus on processing pre-recorded content, live streaming APIs facilitate the real-time transmission of video content to viewers as it happens. These workflows often use a contribution encoder like OBS or Videon EdgeCaster, as well as a live streaming API like Bitmovin. 

Whether broadcasting live events, webinars, or gaming streams, these APIs empower developers to deliver high-quality live video content reliably and efficiently. To keep lag at a minimum, you’ll want to find a live streaming API with support for low-latency protocols like RTMP or SRT.

Capabilities to look for in a live streaming API:

• Low-latency protocols like RTMP, SRT, and WebRTC
• Support for primary and backup inputs with automatic failovers
• Integration with popular contribution encoders like OBS, Wirecast, etc.
• Integration with interactivity tools like chat and polling
• Security and DRM
• Live recording and archiving
• Analytics and insights

“Bitmovin’s flexible and customizable technology has enabled us to solve one of our unique broadcasting challenges: to seamlessly generate a vast amount of parallel live video feeds and present them to the user in the highest quality, wherever they are in the world. 

Znipe.TV’s unique technology of broadcasting time-synchronized video stream of multiple angles sets new demand on a transcoder service, which Bitmovin delivers with their fantastic technical roadmap. To achieve the unique Znipe.TV viewing experience, we chose Bitmovin’s encoding to handle the video transcoding so that we can focus on what we do best, providing world-class entertainment for fans globally, live and on demand.”

– Erik Åkerfeldt (CEO & Co-founder, Znipe.TV)

Playback APIs

Playback APIs, also called client-side video APIs, allow developers to interact with a video player’s core functionality. This includes creating video player instances, controlling playback, or loading new sources. A video player API can also be used to monitor the state of a video player and receive notifications when certain playback events occur.

While some video player APIs differ across platforms, we designed the Bitmovin Player API’s to provide platforms with a unified development experience across Web/HTML5, Android, iOS, and Roku.

Capabilities to look for in a player API:

• Cross-platform compatibility and SDKs for different devices
• Customizable video player UI
• Advanced playback features like subtitles and playback speed control
• Adaptive bitrate support
• Offline playback support
• Integration with analytics platforms
• Security features
• Testing solutions to ensure quality playback

Analytics APIs

Video analytics APIs provide extensive customization over data architecture and how it’s presented. The Bitmovin Analytics API, for instance, allows developers to export raw datasets to cloud storage buckets and further enrich their insight with information collected by other providers. 

With analytics APIs, developers gain access to real-time monitoring and reporting capabilities. Whether the goal is to detect playback errors, identify trends, or monitor audience engagement during live events, these APIs enable timely decision-making and proactive intervention should any hiccups occur.

Capabilities to look for in an analytics API:

• Data capture across an extensive range of data points
• Real-time insights and reporting
• Data customization and export
• Integration with existing analytics platforms

Considerations when comparing video APIs

We’ve covered the capabilities needed for specific parts of the workflow, but what about general considerations that apply to all streaming APIs? Here’s a look at key considerations.

Flexible deployment

Development teams shouldn’t be retrained to specific hardware or cloud services. As such, you’ll want to look for video encoding and playback APIs that are decoupled from any underlying technology. Finding video infrastructure solutions that can be deployed anywhere prevents vendor lock-in and boosts agility.

If you’re already running applications in the cloud, then finding products that can run on your existing resources often makes sense. You’ll also gain more control over costs and commitments by finding a video streaming solution that’s available on your existing cloud providers’ marketplaces.

Bitmovin’s solutions are available on AWS Marketplace, Azure Marketplace, and Google Cloud Marketplace. We also offer the flexibility to utilize your pool of resources on Google Cloud or use our solution on Akamai Cloud.

Comprehensive functionality

Video streaming workflows have a lot of moving parts. So we’d suggest finding a video API that offers coverage across every step, from encoding to playback to analytics. It’s also imperative to assess your specific needs — such as low-latency streaming, ad insertion, and advanced UI styling — before landing on a vendor. 

Check out our extensive library of interactive demos and API examples for a peak at the functionality our platform supports.

Customization

One of the main benefits of going with a video API over an OVP is the extensive customization it will allow. This is especially important at customer touchpoints like the video player. The ability to adjust the appearance and add interactive elements to the player UI will help deliver the differentiated experience you’re aiming to build. 

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

Integration effort

The ease of integrating video capabilities into your workflow will impact your development timeline and the associated costs. Teams looking to get their services to market ASAP may be better off with a turnkey OVP than a video API. But, if the flexibility of a video API is non-negotiable, then you’ll want to find a solution with extensive developer tools. Launching cross-platform video experiences is already complex, which is why builder-centric resources are worth their weight in gold. 

Any vendor worth your investment should offer:

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

OVPs vs. streaming APIs

To wrap up the last two sections, here’s a table summarizing the key differences between OVPs and APIs:

Video streaming SDKs

An SDK is a set of software-building resources tailored to a specific platform (like Roku) or scripting language (like Python). 

What is an SDK?

An SDK, or software development kit, is a set of developer-centric tools designed for a specific hardware, operating system, or language. These pre-packaged kits are made up of libraries, APIs, documentation, and code samples — essentially everything required to make a developer’s life easier.

What is a streaming SDK?

Video streaming SDKs help businesses accomplish specific tasks, such as mobile encoding or video playback on gaming consoles. While SDKs aren’t required to support this functionality, they abstract away much of the complexity and provide developers with specialized tools catered to a need.

Common video SDK Examples

Popular streaming SDKs are tailored to address the unique requirements of different platforms and use cases. Here are some of the SDKs video engineers rely on.

Encoding SDKs

Say you’re looking to build a user-generated content (UGC) mobile app that enables users to stream live video within your platform. For this, you’d need a mobile encoding SDK to convert the raw video files into a compressed streaming format for transport over the internet. 

Technologies like Streamaxia OpenSDK and the Larix Broadcaster SDK support these capabilities by encoding live content into contribution protocols like RTMP, SRT, and RTSP.

Alternatively, imagine you’re building a fitness broadcast platform like Classpass that lets users stream on-demand workout videos. Integrating the Bitmovin API directly into your platform would ensure high-quality playback for viewers and cost-effective storage for your organization. However, implementing this into your existing technology stack could require writing and maintaining code specific to the API’s structure and functionalities. 

With encoding SDKs catering to specific languages like Java, Ruby, and Python, developers can rely on pre-written methods for interacting with the Bitmovin Player API — significantly speeding up time to market.

Bitmovin offers dedicated SDKs for the following programming languages:

• PHP
• C#
• Python
• Node.js / JavaScript
• Java
• Ruby
• Go

Video player SDKs

Consider all the devices that we stream content on today. End users demand the same experience across mobile screens, web browsers, and smart TVs. All of these environments have different requirements, though, which translates to countless hours of development time. 

Using a player SDK catered to each device alleviates this challenge. Video player SDKs make it easy to deploy your solution everywhere viewers are tuning in while ensuring flawless playback across screens. 

They do so by providing the app development tools required to embed video players into specific devices, making it simple for developers to create, control, and monitor the video player experience.

Bitmovin offers dedicated SDKs for the many devices out there, including:

• Android and Android TV SDK
• Flutter SDK
• Gaming Consoles SDK
• HTML5 Web SDK
• iOS and tvOS SDK
• React Native SDK
• Roku SDK
• Smart TV SDK

Did you know…

Deploying Bitmovin’s Player on 2 or more SDKs enables customers to reach an additional 200,000 viewers monthly. Moreover, utilizing it on both iOS and Android platforms can save over 600 hours in player maintenance annually.

Learn more.

Streaming APIs vs. video SDKs

In most cases, developers use APIs and SDKs in tandem. So when considering video encoding, player, and analytics solutions, you’ll want to find developer-centric partners like Bitmovin that provide robust APIs and SDKs, extensive documentation, Github repositories, and community forums to speed up buildout.

Here’s a summary of how APIs and SDKs compare in terms of required expertise, development effort, and customization.

Conclusion

If you’re looking to add video to your service or application, you’re going to need an OVP, API, SDK, or a combination of all three. 

Here at Bitmovin, we use YouTube as a marketing channel and the Streams UI as a tool to quickly go live and share on-demand content on our website. These OVPs are great for tasks like uploading and sharing video content.

Companies looking to build innovative video platforms need more features than an OVP can provide. There’s always the option to develop bespoke solutions in-house, but it can get expensive. Plus, time to market matters. And by selecting ready-to-use streaming solutions that integrate with your existing ecosystem, businesses can speed things up.  

APIs and SDKs provide the perfect middle ground of speed and customization. That’s why we offer developer-centric video infrastructure solutions backed by API coverage across the video workflow.  Our extensive library of streaming APIs, VOD and Live Encoders, Player SDKs, and real-time Analytics simplifies building and optimizing without constraints.

Whether you need an end-to-end video platform backed by a simple API or a combination of components (such as an HTML5 player, cloud-based encoding, live encoding, or video analytics solution), we provide the development solution required to power the future of online video. 

Find out how Bitmovin’s streaming products, APIs, and SDKs can give you a competitive edge. Start your trial today.

The post Video Platforms, Video Streaming APIs, and SDKs Explained appeared first on Bitmovin.

Launching & managing a streaming service in today’s market can be a bit overwhelming, but it’s not for the reasons around the workflow that you’d normally think about. It’s actually about the number of devices you and your team have the capability of supporting. Audience reach is essential for any business and one major piece that is often overlooked is the difficulty around testing, supporting, and maintaining those devices to guarantee that you’re delivering the highest quality of experience with a Player on all of your supported platforms. This is an all too common occurrence in the industry and one we’ll address in this blog by going into: 

• The current state of streaming device fragmentation
• The two stream testing methods that are available for companies
• What Bitmovin is doing to make developers’ lives easier
• How you and your team can support more devices with less effort

Addressing Streaming Device Fragmentation

How many devices do I need to support for my streams?

The devices on the market that audiences are using to stream content are growing rapidly, especially when you account for older models and new ones arriving on the market. Streaming Device makers don’t show any signs of slowing down and are continuously upgrading or introducing new products for users to take advantage of, which can affect the streaming services trying to engage viewer segments. Here is a quick snapshot of just the major devices and platforms viewers stream from:

The current Landscape of Streaming Device Fragmentation

From phones, browsers, and TV suppliers to cars, USB devices, and game consoles, the ever-expanding device growth seems to have no end, and it’s becoming the norm.

Showing the strain it is taking on the streaming industry, another great example of streaming device fragmentation is how leading services support over 25 devices across 12 different platforms, which corresponds with what we’ve seen in the responses from our annual Video Developer Report and can be viewed in the graph below.

If streaming device fragmentation wasn’t concerning, viewer expectations for a better quality of experience across devices continue to rise, and from a study done by Parks Associates, the average household uses more than four different devices at any given moment. A bad viewing experience on any one of these platforms can risk poor press, negative app reviews, and even churn to other streaming services. 

Viewer Expectations of Available Streaming Devices

Soon enough, it will be unmanageable and difficult for any streaming service to support and create a good user experience across all devices, as they would have to physically own them to test the streaming experience.

What are the current ways to support more streaming devices?

There are two ways in which streaming services can guarantee user viewing experiences; manual testing & automated testing of their player on each device.

Standard Stream Testing Processes for devices

Both come at a high cost in terms of time and salaries, especially manual testing, as it requires your in-house or external agency team to build out a testing regimen that they must physically do and observe on a regular basis. Automated testing also comes at a high expense, as you would build it from scratch in-house or acquire a barebones solution. In the long term, this option tends to become more cost-effective & stable as you don’t constantly have your team dedicated to doing just that and let the automation do its thing. The major problem, however, is that you & your team must build out these testing parameters for each and every use case and device type that you intend to support, as both options for an automated testing solution don’t come preset with anything and require Q&A expertise and detailed knowledge of streaming video technology.

What is Stream Lab and how does it simplify my stream testing workflow

Now that we’ve gotten through the nitty-gritty of streaming device fragmentation, user demand, and current testing approaches, let’s get to the good news – there is light at the end of the tunnel. Testing has never been harder and more complex with all the issues identified. We saw and heard the need, rolled up our sleeves, and developed Stream Lab, which has been live for about 2 years now with over 2000 stream tests done weekly on actual devices. Check out our feature one sheet and also a quick video walkthrough of Stream Lab on the Bitmovin Dashboard below.

James Varndell, Director of Product Management – Playback, providing a walkthrough of Stream Lab

How we do it

Through partnerships with device makers, we were already testing our Player on physical devices in real streaming environments to guarantee the quality & functionality we were able to deliver to our clients. We also built out the use cases, as we’ve worked on many different workflows and were able to populate the needs across each device that our Player supports easily. Transitioning this and making it accessible on the Bitmovin Dashboard to our clients is where the major work came in, and since its launch, we have made !

Stream testing process for devices with Bitmovin Stream lab

Stream Lab was created to simplify your workflow and life as it makes testing, supporting, and managing playback on more devices easier. You and your team have full control over the testing scenarios, it comes pre-populated with use cases, doesn’t require you to have a large team and there is no need for extensive video knowledge. The best part of all is that it’s 100% automated and enables you to test with our industry-leading player that helps guarantee your audience has the best streaming experience on the platforms you want to test. All it takes is to follow the setup guidelines and submit your stream for the device you want to test on, and it will automatically set your stream for testing immediately and keep testing the stream on the device every two weeks.

Testing DRM-protected streams that are geo-fenced with VPN

DRM-protected content can now be tested across the devices available within Bitmovin’s Stream Lab, even if the content is limited in location, as it now supports the use of VPNs. This update enables broadcasters and streaming services to test and ensure smooth playback of geo-fenced content from anywhere in the world. This new feature ensures compliance with regional licensing laws and shows how DRM-protected streams function during Playback, providing a reliable and efficient means for testing devices without supporting them officially to guarantee both security and quality of service.

You can check out how to set it up in our developer docs on adding a new stream and also learn more about testing with specific DRM configurations and geo-fenced content.

Adding Quality of Experience metrics to testing functionality

Along with Bitmovin’s Stream Lab stream testing on actual devices, you can now visualize the Quality of Experience (QoE) metrics with our latest update. This innovative feature allows streaming platforms to delve into detailed analyses of their streams, examining pivotal aspects such as startup time, bitrate, buffering, error incidents, and more on the actual device. By integrating these metrics, Stream Lab offers an unparalleled ability for development teams to better understand their content’s performance across various conditions and devices. This granular insight allows platforms to support devices more easily and understand how their viewers experience their content, enabling them to enhance playback support where necessary.

Benefits of Stream Lab

Streaming services that use Stream Lab stand to see many benefits, but if we had to pick a favorite is that it essentially ensures quality of experience. Through the testing, you can ensure a greater viewer experience for your audience on the devices you test, which will ultimately help avoid churn. As it saves your team time and resources developing the use cases, they are able to prioritize other tasks that could be essential to your offering. It will also help your team and company save on budget, as you will be able to support more devices without needing more overhead. 

If you would like to try Stream Lab, sign up for a 30-day free trial today.

The post Bitmovin’s Stream Lab – The Latest Approach to Stream Testing, Support and Playback appeared first on Bitmovin.

This post was originally published in Nov. 2023. It was updated on Feb 19, 2024, with information about current applications that are available on the Apple Vision Pro.

Apple has always been great at creating hype around its new devices or features and getting millions of people to talk about and use them. This was especially true in September at this past IBC, when many conversations we had at our booth and on other stands included mention of Apple’s big announcement on supporting AV1 for the next version of their iOS devices. With their latest push into the AR/VR space, it’s no different. In early 2024, Apple is expected to release the Apple Vision Pro, which is set to be the next big device streaming services are getting ready to support. However, what does it look like to stream video on these devices, and how will it ensure a high-quality experience for viewers? 

In this blog, we will look at what Apple Vision Pro and visionOS are bringing to the table, the features and industries that can take advantage of it, and how Bitmovin’s Player is focused on supporting the new device.

What is Apple Vision Pro and visionOS?

Apple Vision Pro is an augmented reality (AR) headset announced in June 2023. It features a new three-dimensional interface that users can control with their eyes, hands, and voice. The headset is also powered by their latest operating system, visionOS, explicitly designed for spatial computing. Creating applications for visionOS is pretty straightforward, as Apple has streamlined the development process for all Apple platforms through Xcode. 

Xcode is Apple’s integrated developer environment application for those unfamiliar, enabling you to develop, test, and distribute apps for all Apple platforms. Because of this, our iOS Player team found it to be a very straightforward process to add the new platform to existing projects already deployed on iOS and tvOS. 

Does Apple Vision Pro and visionOS support video streaming?

The short answer is yes. The Apple Vision Pro was made with video as the focus and outputs superior picture and sound quality from its 23 million pixel resolution and dual-driver audio pods that enable an immersive experience for users. It supports up to 4K video, allowing streaming platforms to engage viewers with the highest quality live and on-demand content across browsers and dedicated applications.

Are there active applications streaming on Apple Vision Pro?

As the Apple Vision Pro just launched in the US (scheduled for Europe and other areas later in the year), there is currently a growing number of apps that are available or working to go live on the device. With its immersive augmented reality, every platform streaming video has the ability to provide its users with a way to “step into the screen” for a truly unique viewing experience. Some of the active applications that are offering a great viewer experience on the Apple Vision Pro are:

• NBA (check out a video of their app) and MLB and other sports leagues and broadcasters are bringing viewers onto the field with live games, replays, and stats.
• OTT platforms like Paramount+, Peacock, and others are giving their viewers a way to engage with content in any environment
• Social Media platforms like TikTok have users scrolling their feeds while using other apps at the same time

Which industries and use cases work on the Apple Vision Pro?

Depending on the industry and use case, Apple Vision Pro will be a great way for viewers to stream content. Some of these industries include: 

• Sports
  • Viewers will be able to watch their favorite sporting teams like never before with mixed reality capabilities.
    
• Entertainment and OTT platforms 
  • With 4K video and surround sound capabilities, streaming TV and movies will be a more immersive and personalized experience.

• Esports and gaming
  • Users will be able to follow the latest gaming events closer and stream their favorite gamers.

• Online events
  • With virtual conferences, concerts, and more, users will be able to engage and interact more with content they are interested in.

• Health and Fitness
  • Apple Vision Pro will be used to provide remote workouts, physical therapy, and rehabilitation sessions, making it easier for people to access care from the comfort of their own homes.

• Edtech and eLearning
  • Video learning will be more interactive and immersive, making learning and retaining information more accessible for students.

Does Bitmovin support video playback on Apple Vision Pro?

Yes, we do! As Apple Vision Pro will give users a new viewing experience, it’s vital for streaming platforms to integrate and keep a consistent video quality across all devices and browsers. With Bitmovin’s support for visionOS enabling video playback on Apple Vision Pro, integration is possible today. This makes Bitmovin’s Player the only video player on the market that officially supports visionOS, providing dev teams with a unified development experience across all Apple platforms with our iOS, tvOS, and visionOS SDK.

 Some of the features that are available with our iOS, tvOS, and visionOS SDK. See the whole feature by downloading our one sheet.

To further our development, we recently attended an Apple Vision Pro developer lab in Munich, where we got to test out the Bitmovin Player on physical Apple Vision Pro devices. It was essential to get this hands-on experience as we were able to see firsthand how our Player performed when streaming video up to 4K. Today, Playback capabilities on Vision Pro devices are similar to others in Apple’s ranges. However, Bitmovin will continue to support any additions to functionality or integrations that Apple may introduce to this new device type. You can see our latest SDK updates in our release updates.

The wrap-up

As the industry gets ready for the release of the Apple Vision Pro in 2024, it’s clear there are a lot of streaming platforms working to get to market and reach the new viewer base on the device. Ensuring playback is consistent and in the highest quality across every device will be key for streaming platforms in maintaining viewer retention and engagement. That is why Bitmovin continues to focus on supporting the broadest range of devices in the market and providing a robust integration and feature set to enable our customers to reach their viewers with the best quality of experience possible. 

If you want to know more about Bitmovin’s support for visionOS and playback on Apple Vision Pro, join the conversation in our Bitmovin Community, and if you want to test out our solution suite, sign up for our 30-day free trial.

The post Streaming Video on the Apple Vision Pro: Supporting visionOS with the Bitmovin Player appeared first on Bitmovin.

In our definitive 2024 HTML5 Video Tags guide, we will provide you with a thorough understanding of it, covering all aspects, from the basics to more advanced functionalities. This includes what an HTML5 video element and video tag are, how they work, and how they can be customized through the most used HTML5 video attributes.

What is the HTML Video Element?

The HTML Video Element refers to the code that highlights the video tag, its attributes, and the embedded video content on web pages, representing the markup, functionality, and associated behaviors. The element supports multiple video formats and offers various attributes for customization and capabilities to ensure responsiveness and accessibility. It is commonly used interchangeably with video tags; however, it encompasses each part of the HTML video element created by the video tag in the Document Object Model (DOM).

What are media tags in HTML5?

In HTML5, “media tags” refer to the elements introduced to embed and control different types of media content, such as audio files and video files, directly within HTML documents. 

An example of how this looks like for Video and Audio:

<video controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>
<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   <source src="audio.ogg" type="audio/ogg">
   Your browser does not support the audio element.
</audio>

What is the video tag in HTML5?

Part of the media tag, the HTML5 video tag, represented by the <video> tag in HTML5, is a feature that enables playing video files. It provides native support for video playback in modern web browsers without requiring external plugins or players. Utilizing this element makes incorporating video content into websites easy, enhancing user experience and web design flexibility.

How do you embed a video in HTML5?

To embed videos in HTML, you’ll need to use the <video> tag inside the body of the HTML document to showcase the HTML elements. Here’s an example of how the code might look:

<video width="1920" height="1080">
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
 Your browser does not support the video tag.
</video>

Here’s a breakdown of the different factors within that code snippet: 

• Open the code snippet with <video>, and if you know the <width> and <height>, you can set that as well.
• Specify where the source file for the video can be accessed by using the src attribute. Here, you can add another format for the same video using the <source> tag to specify where the video can be pulled. This is useful for cross-browser compatibility, as all formats supported aren’t the same across all browsers and devices.
• Add the “Your browser does not support this video type” to make sure your viewer knows the issue is not on your end but on their browser or device compatibility with HTML5. 
• Finally, close the <video> Tag by placing a / before “video” to finish the code snippet.

What are the problems with the HTML5 Video Tag?

Even though the <video> tag streamlines video streaming on browsers and web-based devices, it also has some limitations that can affect playback and the user and developer experience. These issues are:

• Browser Compatibility Issues and Codec Support
  • Different teams and companies own each browser, meaning they all have different priorities they are focusing on when it comes to supporting specific formats and codecs. This may ultimately lead to playback issues if a browser doesn’t support the format you’re using.

• Performance issues and no Adaptive streaming
  • High-resolution videos can be very heavy on a user’s bandwidth, and depending on the browser, the video tag doesn’t natively support adaptive bitrate streaming protocols like HLS and MPEG-DASH (unless it is Safari, which natively supports HLS), so it can’t adapt to a user’s network environment. However, by implementing Media Source Extensions (MSE) alongside the <video> tag, a video player can gain the capability to adapt the video’s streaming quality to network environments dynamically. Check out our other blog on Adaptive bitrate streaming (ABR). Also, if you want to ensure your stream functions well, see how it performs by testing it on our Player demo.

• Content protection
  • Certain content needs protection that HTML5 just can’t provide since it isn’t natively supported. A video player with a DRM integrated or other content protection capabilities is necessary to protect it.

• No unified user interface
  • Even though every major browser supports the <video> tag for HTML5, as each browser is different, so is the experience users will have when streaming video, which can lead to frustration and abandonment.

Additional features of video players like thumbnail seeking or multi-audio are usually not supported; when it comes to subtitle support, the format a browser supports may vary and might not be what you have for your content.

Which browsers support video in HTML5?

As HTML is the standard for web-based video playback, every major modern desktop and mobile browser supports HTML5 and the usage of the video tag, including:

Desktop Browsers:

1. Google Chrome 
2. Mozilla Firefox
3. Apple Safari
4. Microsoft Edge
5. Opera
6. Samsung Internet
7. Vivaldi
8. Brave

Mobile Browsers:

1. Google Chrome for Android/iOS
2. Safari for iOS
3. Firefox for Android/iOS: 
4. Samsung Internet Browser
5. Microsoft Edge for Android/iOS
6. Opera Mobile/Opera Mini
7. UC Browser

Browser-based TV, STB, and gaming Console apps:

1. Samsung Tizen
2. LG WebOS
3. PlayStation 4 & 5
4. Comcast X1 STBs
5. Sky Q STBs
6. Xbox One Series
7. Vizio
8. Panasonic
9. Hisense

What is a video format for HTML5, and which are supported by browsers?

An HTML5 video format is the file type used within a <video> tag as an option when listing a source. Unlike previous HTML versions where external plugins like Flash were needed for video streaming, HTML5 supports video playback natively within the browser. However, depending on the browser, not all video formats are supported, so it’s best to provide a video element with multiple formats for cross-browser compatibility, or users may experience errors when streaming. This can be due to limited royalty fees or just limited interest.

An example of how this would look within the code is:

<video width="1920" height="1080">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.webm" type="video/webm">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

The most commonly supported HTML5 video formats across different browsers are:

• MP4
  • Most widely supported and compatible format across major browsers

• WebM
  • It has less browser support but is still commonly used as an option with the <video> tag for its benefits with video compression.

• Ogg (Theora):
  • It is supported by browsers like Firefox, Chrome, and Opera but less universally supported than MP4.

What is an HTML5 video error, and how does it look in Chrome?

Viewers streaming in their preferred browser may experience an issue during playback. This could range from start-up errors like a black screen and loading icon continuously spinning to constant buffering and audio and video not being supported by the browser they are using. For Google Chrome, this is no different than any other major browser when encountering video playback errors. A way to understand what is happening with your video when being streamed is by using a video analytics solution. This will help give you insight into how it is performing, and an excellent example of this is Bitmovin’s Analytics.

Converting video to a specific HTML5-supported format

To ensure you provide a source for a video format supported by each browser, you can convert your file to one of the major formats listed above. The downside is that you will increase the storage needed to maintain these files, and they will still just be available in one specific quality, meaning there is a chance the playback will fail altogether if the viewer’s bandwidth is limited.

To highlight the bandwidth issue and the topic of converting a video file into a supported format, this is where adaptive streaming comes into play. As I mentioned earlier, if you want to enable ABR capabilities, you need to use HLS and MPEG-DASH streaming protocols, and with this, you’ll need an encoder like FFMpeg or Bitmovin’s VOD encoder. Also, check out our complete encoding guide to learn more about encoding. 

HTML5 Video Attributes

HTML5 offers many attributes that can be set within the <video> tag and are essential for defining how the video behaves and appears on a webpage. These attributes provide significant control over how the video is played back and how it’s viewed, enhancing the user experience. However, the look and behavior of some attributes may vary across different user’s browsers and platforms. The most used HTML5 video attributes include

• Width and Height
  • Define the size of the video player that will be streaming the content.
  • Code example
    • <video src=”movie.mp4″ width=”1920″ height=”1080″></video>
      
• Controls
  • When included, it displays the default video controls (play, pause, volume control, etc.) to the user.
  • Code example
    • <video src=”movie.mp4″ controls></video>
      
• SRC
  • This specifies the source URL of the video file. This is a common shorthand version of using the source tags you have seen earlier, but it only allows you to specify one file format.
  • Code example
    • <video src=”movie.mp4″></video>
      
• Autoplay:
  • The autoplay attribute makes the video play automatically upon loading. However, the autoplay attribute is not always supported at the browser’s level
  • Code Example
    • <video src=”movie.mp4″ autoplay></video>
      
• Loop:
  • If enabled, the video will start over again once finished.
  • Code example
    • <video src=”movie.mp4″ loop></video>
      
• Muted:
  • This will mute the audio by default.
  • Code example
    • <video src=”movie.mp4″ autoplay muted></video>
      
• Preload (none, video metadata and auto)
  • This instructs the browser to load the video when the page is loaded. It can have values like none (don’t preload), metadata (video duration, dimensions, etc.), and auto (preload the entire video).
  • Code example
    • <video src=”movie.mp4″ preload=”metadata”></video>
      
• Poster:
  • This specifies an image to be shown while the video downloads or until the user hits the play button.
  • Code example
    • <video src=”movie.mp4″ poster=”thumbnail.jpg”></video>
      
• Playsinline
  • This is mainly for iOS devices and indicates that the video should play on the webpage itself (inline) rather than opening in fullscreen.
  • Code example
    • <video src=”movie.mp4″ playsinline></video>
      
• AutoPictureinPicture
  • This will direct the video to enter picture-in-picture mode in supported scenarios automatically
  • Code Example
    • <video src=”movie.mp4″ controls autoPictureInPicture></video>

Test out different player configurations with our Player playground to see how they fit with your use case, and learn about how you can improve your user experience further with the Bitmovin Player.

To see how this would look all together, here is an example:

<video width="1920" height="1080"
      loop
      muted
      autoplay
      poster="placeholder-image.jpg" 
      Playsinline 
      preload="auto"
      controls 
      autoPictureInPicture>
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
   <source src="video.ogv" type="video/ogg">
   Your browser does not support the video tag.
</video>

Video Accessibility with HTML5

When providing content to a broad audience, you must cater to multiple types of viewers. This is where video accessibility with HTML5 is vital, as the settings used can make the content accessible to all users, including those with hearing, sight, or other disabilities. Additionally, this is very important for streaming platforms in the EU, as the EU Accessibility Act, which will go into law on June 28, 2025, will make it so that every platform that streams video needs to make them accessible for anyone disabled. 

To implement this, you’ll need to insert the <track> tag that has multiple attributes, such as:

• SRC:
  • As listed above, this specifies the source of the track file and or accessibility concerns. This is typically made available through a WebVTT (.vtt) file that contains the text track data.
    
• Kind:
  • This defines the type of text track utilized for this source. This can be subtitles, captions, and descriptions, which are vital for people who are blind or hard of hearing or don’t understand the spoken language well. Additionally, the track tag supports chapter breakdowns and metadata for non-accessibility use.
    
• SRClang:
  • This sets the language of the track text data and should be a valid BCP 47 language tag.
    
• Label:
  • This provides a readable title of the text track and enables the user to select between different items within the video player interface.
    
• Default:
  • This setting makes it start by default unless the user’s preferences indicate something different.

An example of how this would look in the HTML document is:

<video controls>
   <source src="movie.mp4" type="video/mp4">
   <track src="subs_en.vtt" kind="subtitles" srclang="en" label="English" default>
   <track src="subs_fr.vtt" kind="subtitles" srclang="fr" label="French">
   <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
</video>

Here’s a breakdown of key elements for HTML5 video accessibility:

• Captions and Subtitles:
  • This provides text alternatives for audio content, aiding users who are deaf or hard of hearing and is usually applied by listing WebVTT (.vtt) files.
    
• Descriptions:
  • This helps describe important spoken details in the video for users who are deaf or hard of hearing and can be included within the main subtitles but often are a separate track.
    
• Transcripts:
  • This is a text version of the audio and visual content for users who need or want a text alternative. This would include the entire dialogue and describe every visible element.
     
• Accessible Video Player:
  • When viewing content, the controls must also be accessible, so setting the <controls> for the player experience is critical.
    
• Control Video Playback:
  • Allow users to control the video playback, including pausing, stopping, and adjusting volume.
    
• Language Identification:
  • This will help your browser and player provide accurate language listings for captions, subtitles, or audio descriptions.
    
• Fallback Content:
  • Ensure your content plays back by providing alternative content for browsers not supporting HTML5 video.

An example of how this would look is:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Accessible HTML5 Video</title>
    <style>
        /* Optional: CSS for styling captions for better visibility */
        ::cue {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            font-size: 1.2em;
        }
    </style>
</head>
<body>

<video id="myVideo" controls width="640" height="360" poster="thumbnail.jpg">
    <!-- Video sources -->
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">

    <!-- Captions -->
    <track label="English captions" kind="captions" srclang="en" src="captions_en.vtt" default>
    
    <!-- Subtitles -->
    <track label="Spanish subtitles" kind="subtitles" srclang="es" src="subtitles_es.vtt">

    <!-- Descriptions (if separate text track) -->
    <track label="English Descriptions" kind="descriptions" srclang="en" src="description_en.vtt">
    
    <!-- Fallback content -->
    Your browser does not support HTML5 video. Here is a <a href="example.mp4">link to the video</a> instead.
</video>

</body>
</html>

This is how captions would look on the video player

An example of captions on a video player

Responsive video playback: optimizing for mobile and tablet viewing

Setting up the width and height attributes of the HTML5 video element is essential for completing your video’s dimensions. However, when it comes to ensuring your video content is responsive, meaning it fits the screen size when viewed across various devices, using static dimensions can be limiting. 

For example, a video set at a specific size width might look great on a desktop, but if viewed on mobile or another device, it may be cut off (see image below).

Image of a non-responsive video

Example of a responsive video in HTML 

This ultimately creates a poor viewing experience for the user. To tackle this, you’ll need to leverage CSS to boost your <video> element. For instance, setting the height to “auto” allows the video to maintain its original aspect ratio on different screen sizes, ensuring a consistent and optimal viewing experience.

Here’s how you can make your HTML5 video responsive:

1. Use CSS for Fluid Dimensions
   1. Apply CSS styles to the <video> element, setting the width to 100% and height to auto. This allows the video to adapt to the width of its container while preserving its aspect ratio.
      
2. Contain the Video in a Div
   1. Wrap your <video> element in a <div> and set the desired dimensions on the <div>. This method gives you more control, as the video will scale proportionally within the container.

By doing this, your video will be better suited for a range of devices, from large desktop monitors to smaller mobile screens, ensuring a user-friendly experience for all viewers.

In Conclusion

The HTML5 Video Element and tag have played a pivotal role in helping platforms stream video to viewers. With its functionality and customization capabilities through the HTML5 video attributes, you can deliver a better experience to your audience as we’ve provided the best practices for embedding video and ensuring accessibility over the web. 

Whether you are just starting or are an experienced developer, the insights provided here should empower you to create more engaging, accessible, and cross-browser-compatible video content. Keep these principles in mind as you continue to explore the dynamic world of web video and multimedia.

Find out how our solutions can help you include ads within your streams by signing up for a free trial today.

The post HTML5 Video Tags: The Ultimate Guide [2024] appeared first on Bitmovin.

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.

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 <video> and <audio> 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.

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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?

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.

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.

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.

Top 4 free and open-source video players in 2024

So, what are the best HTML5 video players for developers searching for a free solution or choosing to go the open-source route? Our list below details the features, pros, and cons of our favorite free options. Keep reading or use the list below to navigate to a specific section.

Best free and open-source HTML5 video players

• Shaka Player
• Video.js
• dash.js
• HLS.js

Free to use mobile players

• ExoPlayer
• AVPlayer

Shaka Player

As an open-source JavaScript library, Shaka Player enables adaptive streaming for media playback. Because Shaka Player is built on web APIs, it only runs in the browser.

Shaka Player has a large feature set and robust error handling. The Google-created online video player has a large community behind it and can be customized for specific use cases.

Key features:

• Supports any browser.
• Protocol support across adaptive bitrate formats like DASH, HLS, and Microsoft Smooth Streaming.
• Supports FairPlay, Windvine, and PlayReady DRM.

Pros:

• Easy to deploy into most projects but may require additional development and maintenance costs.
• Can be customized extensively.
• Supports offline storage and playback using IndexDB.

Cons:

• Doesn’t support native playback on iOS, Android, or Roku; can only support browser-based playback.
• Lacks professional-grade features like watermarking.
• Player logic can cause a poor viewing experience when switching to HD.

[Compare Shaka Player and Bitmovin]

Video.js

Video.js is a widely adopted open-source framework that uses basic JavaScript and CSS for easy customization. As the technology behind more than 450,000 websites, Video.js stands out for its versatility. 

The Brightcove-sponsored video player is renowned for its straightforward integration and additional features like Google Analytics tracking. It also offers plugins for YouTube and Vimeo support, making it an excellent option for social media integrations. 

Like ShakaPlayer, Video.js is an HTML5-only player — meaning it can’t power native video playback on devices like mobile phones.

Key features:

• Supports MP4 and WebM files, along with adaptive bitrate streaming (ABR) via HLS and MPEG-DASH. 
• Vast codec support.
• Dedicated UI for live streams.
• Seamlessly integrates with popular platforms like Vimeo and YouTube.

Pros:

• The framework offers a rich ecosystem of plugins for advanced functionalities like Chromecast and virtual reality (VR).
• Includes hundreds of plugins for adding features like playlist management, analytics, DRM, and advertising.
• Looks great out of the box, and is also easy to style with CSS.
• Extensive documentation, guides, blog, and community.
• Lightweight and easy to use.
• Can fall back on legacy technologies like Flash.

Cons:

• Lacks frame-accurate seeking and cuepoint features.
• Doesn’t support native playback on iOS, Android, or Roku; can only in power browser-based playback.

[Compare Video.js and Bitmovin]

Dash.js

As the DASH Industry Forum’s HTML5 video player, dash.js was designed to establish a production quality framework for building audio and video players for the DASH protocol. The player uses cutting-edge ABR algorithms and also supports low-latency CMAF for DASH.

Unlike most open-source HTML5 video players, dash.js keeps its roadmap public. This provides insight into improvement and bug fixes being prioritized. Even so, the roadmap is much more limited than that of a commercial HTML5 player and dash.js’s documentation isn’t always up to date.

Key features:

• Support for DASH and low-latency CMAF for DASH
• Support for Widevine and PlayReady DRM.
• Supports closed captions and subtitles. 

Pros:

• Public product roadmap provides transparency into bug fixes and improvements.
• Customizable and comes with a lot of features.
• Enables a live playback catch-up mechanism to support low-latency streaming and synchronization between two videos.

Cons:

• Doesn’t support HLS, the most common streaming protocol in use today.
• As an HTML5-based player, it can not support native playback on iOS, Android, or Roku. 
• Lacks professional-grade features like watermarking and video overlays.

HLS.js

HLS.js is a JavaScript library for browser-based streaming that relies on the <video> element and Media Source Extension (MSE). It’s one of two HTML5 video players on our list that supports all major DRMs — the other being Shaka Player. That said, the HLS video player doesn’t support DASH and is limited to browser-based streaming.

Key features:

• Supports the HLS protocol (as you’d expect from a HLS video player)
• Supports FairPlay, Widevine, and PlayReady DRM.
• Timed metadata support for HTTP Live Streaming, including ID3 format carried in MPEG-2 TS, Emsg in CMAF/Fragmented MP4, and DATERANGE playlist tags.
• Built-in analytics with the ability to monitor internal events, network events, video events, and exposed playback session metrics.

Pros:

• Accurate seeking on both VOD and live streams, not limited to fragment or keyframe boundaries.
• Provides error resiliency with retry mechanism for recovery from fatal media or network errors.
• Flexible quality switching modes provide a smooth user experience under varying network conditions.
• Comprehensive support for timed metadata enhances the potential for interactive and dynamic content.

Cons:

• HLS.js is not supported on iOS Safari for iPhone due to the absence of MediaSource API support.
• As an HTML5-only player, it can not support native playback on iOS, Android, or Roku. 
• Doesn’t support DASH

While these next 2 players are not HTML5-based, if your preference is to use free and open-source players on all platforms, ExoPlayer and AVPlayer are the free-to-use native players for iOS and Android devices.

ExoPlayer

ExoPlayer is a free-to-use application-level media player for Android devices. ExoPlayer (soon to be Media3) is open-source, and the native player shipped with Android — and thus the best free option for creating a playback experience on Android apps. 

As an alternative to Android’s MediaPlayer API, it can be effortlessly updated along with Android applications. ExoPlayer also offers extensive customization options and boasts a large and responsive community.

This is the built-in native Player for Android platforms only. That means that developers have to use a separate video player for streaming on other devices, like AVPlayer for Apple devices.

ExoPlayer can play back multiple protocols, including RTSP. This makes it possible to stream live content directly from an IP camera without having to repackage it in an HTTP-based format like HLS.

Key features:

• Supports HLS, DASH, Smooth Streaming, RTSP, Low-Latency HLS, and low-latency CMAF for DASH.
• Customizable player skin for branded streaming experiences.
• Supports Widevine and PlayReady DRM.
• Supports closed captions and subtitles. 
• Support for playlists.

Pros:

• Less variation and issues across different devices than Android’s built-in MediaPlayer.
• Easy to update to newer versions through Play Store application updates.
• Can be customized extensively.
• Offers official extensions with additional libraries for monetization, etc. 

Cons:

• Lacks professional-grade features like watermarking.
• Consumes more battery than Android’s MediaPlayer for audio-only playback on some devices.
• Has device compatibility issues with FireOS, Nexus Player, and some Android emulators.
• Requires maintenance and architectural updates.
• Isn’t ideal for lightweight mobile apps.
• No offline playback.
• Android only.

[Compare ExoPlayer and Bitmovin]

AVPlayer

Developed by Apple, AVPlayer is the native player for iOS streaming. Similar to what ExoPlayer is to Android, it’s the best free player for enabling playback on Apple devices.

The player provides developers with a robust toolset for controlling multimedia content streamed via HLS as a .m3u8 file, ensuring an optimal experience on Apple devices.

Key features:

• Customizable video player skin for branded streaming experiences.
• Supports subtitles.
• Supports FairPlay DRM.

Pros:

• Tightly integrated into the Apple ecosystem, ensuring cohesive experiences across desktop and mobile devices.
• Supports AirPlay, which allows users to share videos wirelessly and extend the viewing experience to larger screens.
• Provides high-performance video playback leveraging Apple’s hardware and software optimizations.
• Can be customized extensively.

Cons:

• Lacks professional-grade features like watermarking.
• iOS only

[Compare AVPlayer and Bitmovin]

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.

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.

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 <video> tag makes it easy to add video to your website, it doesn’t allow you to control streaming content. Rather, the <video> 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.

In this blog, we will go into the essentials of ABR streaming, how WISH ABR is changing that methodology, and what Bitmovin has done to make it available on the Bitmovin Player.

What is adaptive bitrate streaming, how does it work, and what are the benefits?

Adaptive bitrate (ABR) streaming refers to the logic that a video player uses to dynamically adjust the quality of the video stream based on the available bandwidth. It ensures that users receive the best possible viewing experience by continuously adapting the video bitrate to match the network conditions. For example, if the user has a poor connection, it will request lower-quality packets from the edge, and when the connection is healthy again, it will request the highest quality available. 

It works by encoding the video content into multiple renditions, each with different bitrates and quality levels. These renditions are further divided into small segments or packets. The video player then evaluates and monitors the network conditions and selects the appropriate rendition for each segment, optimizing for quality and smooth playback. You can read more on the general aspects of Adaptive bitrate streaming in our recent blog.

Diagram of how ABR works per connection type

The Benefits of ABR

• Seamless playback:
  • ABR ensures viewers experience minimal buffering and interruptions, even in challenging network conditions.
    
• The highest quality possible:
  • By dynamically adjusting the video bitrate, ABR delivers the best possible quality while avoiding buffering issues.
    
• Bandwidth efficiency and cost savings:
  • ABR optimizes bandwidth usage by adapting the video quality to match the available network capacity, reducing data consumption.
    
• Device compatibility:
  • ABR can be utilized across a wide range of devices, including mobile phones, tablets, smart TVs, game consoles, set-top boxes, and browsers.

What is WISH ABR and how is it different?

First developed by Minh Nguyen and the Athena Team and focused on mobile device playback, WISH stands for Weighted Sum model for HTTP Adaptive Streaming and takes the ABR logic one step further. Instead of just adapting it to network conditions, WISH ABR enables the personalization of the ABR to fit specific use cases. This essentially gives platforms the tools to improve QoE by customizing their ABR logic to specific device settings, configurations, types, and other variables that may be common to a streaming platform’s audience. Proving this concept works, in WISH’s testing evaluation, it was able to enhance QoE by up to 17.6% and reduce data usage by 36.4%.

WISH’s logic is based on a mathematical model consisting of three distinct components /cost factors:

• Bandwidth cost
  • “How much data will it be used for the download?”
• Buffer cost
  • “How much will the buffer level decrease?”
• Quality cost –
  •  “How much will the video quality decrease?”

The mathematical model that WISH is based on.

The algorithm evaluates each video rendition, judging each value from the “costs” listed above, and selects the one that balances them all the best with the lowest overall cost. WISH lets users adjust this balance based on their preference, like choosing between better video quality or less buffering, depending on their settings.

An example of WISH selecting the perfect rendition at that moment as it evaluates the total cost of the variables (image from the Athena publication)

How did we implement it for the Bitmovin Player?

Seeing how well it performed with mobile devices, we wanted to expand its capabilities and leveraged our collaboration with the Athena team to implement it for our Web SDK. This is important as it could then be used across smart TVs, game consoles, browsers, set-top boxes, and more. After some minor adjustments and refinements, we deployed it successfully. Now, anyone using the Bitmovin Player can test it out for themselves and apply it to their workflow by accessing our API documentation for AdaptationConfig, AdaptationLogicType, and TweaksConfig.

Ongoing Improvements and Testing

We are still defining specific attributes around the new logic before making it a default functionality. However, from our initial testing, we’ve already seen pretty good results, specifically regarding rebuffering (Stall time) and overall QoE (Mean ITU score). In the future, we are looking to list “presets” that enable specific behaviors by device, giving streaming companies an expectation of what they can achieve with each setting, easily enhancing the QoE for their audience. Additionally, the WISH ABR can be utilized with the Bitmovin Player for any industry and will also be the main ABR logic for our latest video player, Player Web X.

Conclusion

ABR functionality has revolutionized the video streaming landscape by making it possible for streams to adapt the video quality to match network conditions dynamically. WISH ABR takes this concept a step further by introducing a user-centric approach to adaptive bitrate selection and optimizing the streaming experience to align with the preferences of individual viewers. The integration of WISH ABR into the Bitmovin Player further enhances the capabilities of our powerful solution, empowering content providers to deliver a superior quality of experience. Now, we can definitely say the future of video streaming is poised to be more personalized, efficient, and immersive.

The post Adaptive Bitrate Streaming Evolved: WISH ABR and Bitmovin’s Player Integration appeared first on Bitmovin.

This is where real-time stream monitoring comes into play.

In this blog, I will go into what real-time stream monitoring is, why it’s important, and how Bitmovin’s Analytics empowers streaming platforms to get the complete picture of their stream’s performance.

What is real-time stream monitoring analytics and why is it important?

Real-time stream monitoring analytics refers to continuously tracking and collecting data on events triggered during playback related to the quality of experience (QoE), quality of service (QoS), and stream performance in real-time. This is crucial for dev & support teams as it enables them to understand the user’s experience when viewing their content. It involves monitoring various metrics and parameters during the stream that analyze user behavior and provide dev teams with metrics they can use to optimize content delivery, amongst other data points.

These metrics are essential for VOD and live streams but play a much more critical role in live events. This is because any disruptions, buffering, errors, or other events that may arise can have an immediate, costly, and significant impact on the viewer and their satisfaction. You and your team can proactively address issues, minimize downtime, and provide a superior streaming experience for your audience by continuously monitoring and analyzing data in real-time. This approach contributes to increased subscriber retention and positive user reviews and can significantly influence a streaming platform’s success.

Does Bitmovin’s Analytics have real-time stream monitoring?

The short answer is yes, we do! After receiving requests for the feature, we added it to our roadmap and recently released real-time stream monitoring to our Analytics solution a couple of weeks ago. Anyone can now view, test, and use it immediately on the Bitmovin dashboard. 

What are the use cases and benefits of Bitmovin’s real-time stream monitoring?

Besides our in-depth metrics pages, we’ve made the essential data points you need to track live and on-demand stream performance accessible at a glance on one page. This gives you a granular view in a 15-minute window that gives you a clear picture of how your viewer’s experience is trending and helps you proactively identify any errors they may be experiencing. Additionally, you can seamlessly click through from the real-time stream monitoring page to the specific metric you’re seeing to dig deeper into that individual data point.

Showcasing how it works and what it includes, our Director of Product Management for Playback, James Varndell, recorded an explainer that goes into the feature’s details.

Any industry can utilize this, especially when streaming live events, such as through Amazon IVS, which is directly integrated with Bitmovin’s Analytics. As you saw on the video, along with the 6 data points initially shown, you can also apply over (X) filters (more if you’re using API) that enable you to access each use case and benefit from the platform.

Main Use Cases:

• Performance Metrics
  • Focused on QOS, this monitors metrics such as rebuffering rate, playback errors, bitrates, and startup times to assess the overall performance of the video stream. 

• User Experience Metrics
  • Evaluate user-centric metrics for QoE, such as user engagement and viewer retention, to understand how viewers are experiencing the content and where you can activate them.

• Device and Platform Reach
  • Analyze data to ensure compatibility and smooth playback across different devices, operating systems, and streaming platforms. Compare performance across different device types

• Geographical Insights
  • Examine streaming performance in different regions to identify potential issues related to content delivery networks (CDNs) or regional variations in internet infrastructure. Use these insights to optimize playback settings.

Main benefits

• Customizable monitoring dashboard
  • Set up, track, view, and filter through the vital metrics of your live and on-demand video on Bitmovin’s customizable dashboard.
    
• Maintain stream uptime and stability
  • Spot issues instantly and find the root cause quickly to minimize the impact on your viewers. Understand real-time viewership and demand on your infrastructure.
    
• Monitoring dashboard for the operations room
  • Display essential data points across your command center and keep your operations team aware of your stream’s performance.

The Wrap Up

Real-time stream monitoring can be applied to any use case and industry that streams video online. It will continue to be essential for all development and support teams as it enables platforms to guarantee the playback experience for audiences. With our latest feature, streaming platforms can now keep up to date with what is happening with their streams. 

Check out our real-time stream monitoring feature for yourself by accessing your account or signing up.

The post Enhancing Video Streaming Quality with Real-Time Stream Monitoring: Bitmovin’s New Analytics Dashboard appeared first on Bitmovin.

I saw this shift firsthand throughout each industry show and even more recently at our semi-annual Bitmovin Innovators Network event. There, clients and partners presented trending industry topics and successful use cases from projects we’re working on with them that have helped create and define these “best-of-breed solutions.” In this blog, I will highlight why partner relationships are essential for streaming platforms, recent successes, and what we mean by ‘building better together’ when we speak about Bitmovin’s Innovators Network.

Managing costs and exploring vendor solutions with Paramount+

“Innovate with us,” stated Tony McNamara as he started off the first presentation at the event. He emphasized that vendors should approach their customer relationships as a real-time collaboration rather than viewing the relationship from a transactional customer-vendor perspective. This is because customers are often closer to the actual problem than the vendor, which can incentivize vendors to work together with them to solve complex problems that otherwise would be beyond reach. Some customers will want turn-key solutions, but the innovation and tomorrow’s advances are in solving today’s issues in new ways, which the right “client” can be a partner in coordinating. This can, in turn, help solution providers expand their product features to tackle unique challenges and give them a small but noticeable advantage for at least the next 6-12 months. 

Continuing from talking about innovating with vendors, the topic of profitability came up. Economic pressure has been taking its toll on the industry, and as the economy tightens, companies are forced to explore different ways of generating revenue. “It is no longer just growth at any cost.” stated Tony Mcnamara, “It’s about getting to profitability, generating new sources of revenue (FAST, Ad supported tiers), and even looking within the business for ways to optimize processes and reduce spend.” 

This had become an objective for their dev team as they evaluated their internal processes, specifically for on-demand (VOD) encoding. They had built an in-house solution to handle their encoding needs, which excels for a rapid turnaround time but doesn’t handle some of the more complex (e.g., HDR) encodes. They decided to split the processes – quick turn work using the internal encoder but for HDR/etc. needs, using Bitmovin – thus meeting their needs, minimizing trade-offs and costs, and allowing the internal development team to focus on their specific domain issues and innovations.

With this, the presentation had come full circle and back to why the “Innovate with us” statement rang true to every partner and streaming service in the room. Paramount had realized it was great to own the process internally. Still, the right vendor or “Partner” in this case, like Bitmovin, made it more accessible and helped avoid a good amount of headaches when it came to cost, functionality, and planning product features for future needs.

Powering Television New Zealand’s sports streaming hub sustainably

As sustainability has become a major talking point in the industry, streaming services worldwide have made optimizing their video workflows for the environment in the best way possible a core focus. This was the main topic for the second presentation by Accedo on TV New Zealand, a public broadcaster that had just recently won a selection of premium sports rights and was focused on deploying the best possible experience for its end users and a greener video workflow for their entire service including the newly acquired sports rights. 

Accedo’s local Pro Services team has worked with TVNZ for multiple years and was tasked to test and validate various video players. The choice was obvious: the Bitmovin Player was the only one who delivered on all the criteria. With TVNZ’s goals in mind, they wanted partners to help them achieve their initiatives while giving their users the best viewing experience possible. This is where Accedo and Bitmovin’s “Better Together” collaboration came into play.

Video processing and streaming are responsible for a significant portion of carbon emissions, so Accedo’s launch of their sustainable marketplace and Bitmovin’s ECOMode for the Player were the perfect fit for this project. By collaborating closely, they solved any issues that arose and got the correct stream configuration to help TVNZ reduce carbon emissions, stream content more sustainably across all devices, and provide data on the carbon footprint for active streams to their viewers. Other partners complimented this group solution, namely EZDRM with their multi-DRM, which integrated seamlessly with Bitmovin’s Player and delivered content securely on smart TVs and various other devices, making it easy for TVNZ and streaming services like them to protect revenue from high-value content like live sports.

With TVNZ and other streaming services, Accedo has made sustainability a top business priority. It encompasses both the solutions they offer and the partners they choose to work with, ensuring a positive impact on customers and the world. The multi-vendor “Better Together” collaboration helps OTT streaming services like TVNZ deliver the highest quality content while maintaining their commitment to sustainability.

“We needed to launch a comprehensive streaming platform in a short time frame after securing a selection of premium sports rights. Partnering with Bitmovin and Accedo ensured we were able to put in place a high-quality video streaming solution with the appropriate content protections. Importantly, our viewers were able to watch their favourite sports uninterrupted and with ease from day one. The feedback we’ve received has been fantastic and we’re looking forward to a big summer of cricket ahead of us” 

Kym Niblock, TVNZ’s Chief Product and Information Officer.

Enabling a major US basketball league to stream and captivate their viewers globally

In the third and final presentation, Mediakind and Microsoft presented how MediaKind’s live and on-demand streaming platform running on Microsoft Azure infrastructure with the Bitmovin Player helped a major US basketball league stream billions of views to millions of viewers globally. This major US basketball league wanted to revitalize its streaming application, driven by its goals to assert greater control over its platform, harness user data for an improved experience, and, most importantly, continuously captivate and engage its fanbase.

This endeavor represented a significant challenge that involved meticulously piecing together various technical partners to provide a best-of-breed solution. From their perspective, the streaming application project was not only about delivering personalized content but also about laying a foundation for the future of how they would engage their audience.

Bitmovin played a vital role in this complex venture, collaborating closely with Microsoft and MediaKind. This partnership was essential to achieving remarkable results, particularly regarding uptime, reliability, and quality.

This solid foundation allowed the major US basketball league to realize its vision—a globally scaled, secure cloud solution built with dependable infrastructure and cutting-edge data and AI capabilities. With this in place, the league had the tools to innovate, adapt, and provide its fanbase with an extraordinary streaming experience. The success of this solution underscored the importance of the approach in addressing the various requirements of modern streaming applications and utilizing the right partners to build better together and set a new standard for reliability and user satisfaction in the industry.

Why the Bitmovin Innovators Network Matters to OTT Providers

Through all of the presentations, the main item that was portrayed was how building “better together” was the only possible way any of these successful outcomes could have been achieved. The Bitmovin Innovators Network transcends conventional industry collaboration, evolving into a vibrant community that unites top-tier technology vendors, systems integrators, resellers, consultants, and leading-edge research institutions. This collaborative ecosystem is dedicated to streamlining the complexities of live and on-demand media workloads. Our overarching mission is to democratize streaming, making it accessible and efficient for both media and non-media organizations.

In this interconnected network, knowledge-sharing and resource synergy are the driving forces. We harness collective expertise to craft innovative solutions that empower media companies to deliver outstanding content experiences. Simultaneously, we introduce non-media entities to the transformative potential of streaming technology. This network stands as a testament to the power of innovation, simplifying the world of streaming video for all involved parties.

Conclusion

Cooperation, innovation, and sustainability are essential for every streaming service and technology vendor, and finding the right balance between in-house solutions and external offerings is crucial for cost-effective growth. With how increasingly competitive the space is getting and economic pressure taking its toll, it’s clear that multi-vendor collaboration is needed more than ever. 

Partnerships like those between Paramount+ and Bitmovin, TVNZ with Bitmovin and Accedo, and the major US basketball league with Microsoft, MediaKind, and Bitmovin demonstrate the power of what collaboration and building better together can do in this industry. The Bitmovin Innovators Network further highlights the importance of this in simplifying streaming challenges and making a more accessible and sustainable future.

You can check out the many partners in the Bitmovin Innovators Network on our website and enquire about joining by contacting our partner team.

The post Building Better Together with the Bitmovin Innovators Network appeared first on Bitmovin.