Bitmovin Adaptive Streaming Player for MPEG-DASH & HLS

These examples are build around the Bitmovin Adaptive Streaming Player, demonstrating usage and capabilities of the HTML5 based HLS and MPEG-DASH player.

Table of Content

• Available Sample Apps
• Sample Apps Setup Instructions
• Documentation & Release Notes
• Support

Available Sample Apps

Basics

• events
  • ON_DOWNLOAD_FINISHED: Report download errors for live streams using the ON_DOWNLOAD_FINISHED player event.
  • eventConstants: Use event constants for registering event handlers at the player.
  • ON_SEGMENT_REQUEST_FINISHED: Use ON_SEGMENT_REQUEST_FINISHED event to analyze which segment has been downloaded and implement custom workflows according to the HTTP status code.
• playlist
  • simplePlaylist: Build a playlist with the Bitmovin HTML5 Player API.
• requirejs-demo
  • buildPlayerWithRequirejs: Build the Bitmovin HTML5 Player using requirejs.
• webpack-demo
  • buildPlayerWithWebpack: Build the Bitmovin HTML5 Player using webpack.
• errorHandling
  • handleDownloadErrors: Custom retry logic for the case that files cannot be downloaded.
  • showPosterOnError: Display a still image whenever an error occurs.
  • switchQualityOnHttpStatusCode: Tweak the ABR behavior based on HTTP errors.
• Typescript
  • buildWithEsbuildTsc: Build a sample using Typescript, its tsc compiler and esbuild.

Playback & Casting

• CAF Receiver: Example of a Chromecast Application Framework (CAF) receiver app, also known as cast receiver v3 SDK.
• keyboard
  • keyboardSupport: Keyboard shortcuts for the Bitmovin Player.
  • keyboardCustom: Custom keyboard shortcuts for the Bitmovin Player.
• mobile
  • android MediaSessionAPI: Control playback via Android Notifications

Advertising

• ssai
  • dfp: Use Google DoubleClick for Server-side ad insertion (SSAI)
  • Yospace: Use Yospace for Server-side ad insertion

UI/UX & Subtitles

• playerUi
  • customErrorMessage: Display your own error messages within the Bitmovin HTML5 Player
  • timelineMarkers: Identify the differents parts of a stream by setting some markers over the timeline
  • timelineMarkersLive: Using timeline markers for live streams
  • timelineMarkersWithImages: Passing imageUrl with timeline marker
  • separatedSubtitleAudioSettings: Extracted audio tracks and subtitle settings from the settings panel direct into the controlBar
  • labeling: Change Languages, Quality and Subtitles labels
  • customForwardRewindButtons: Custom Forward & Rewind Buttons
  • playbackControlsUiWithImaAds : Adding playback controls UI during Ads playback with IMA SDK
  • TV UI

    • disney: Customized TV UI in the style of Disney Plus

    • netflix: Customized TV UI in the style of Netflix

    • youtube: Customized TV UI in the style of Youtube

• subtitles
  • customSubtitleDisplay: Render subtitles using the ON_CUE_ENTER and ON_CUE_EXIT player events.
  • uiSubtitleOverlay: Use only the SubtitleOverlay from the Bitmovin Player UI but not the rest of the UI.

UI Frameworks

• angular
  • buildPlayerWithNpm: Using the Bitmovin NPM package
• react
  • reactJs: Using the Bitmovin Player within a react component
  • buildPlayerWithBundledNpmClassBased: Using the Bitmovin Monolithic NPM package on a class based React component.
  • buildPlayerWithBundledNpmFunctionBased: Using the Bitmovin Monolithic NPM package on a function based React component.
  • buildPlayerWithModularNpmClassBased: Using the Bitmovin Modular NPM package on a class based React component.
  • buildPlayerWithModularNpmFunctionBased: Using the Bitmovin Modular NPM package on a function based React component.
• vue
  • vueJs: Using the Bitmovin Player within a vue.js component

Specific Use Cases

• adaptation
  • preferredStartupQuality: Set a minimum startup quality for a specified amount of time before using the built-in adaptation logic again.
  • regionOfInterest: Multiple players with low quality and the active player (where the mouse is over) switches to better quality.
  • rateBasedSwitching: Measuring the speed of downloads and select the quality accordingly.
• frameaccurate
  • Frame Accurate Control: Bitmovin Player Wrapper for SMTPE timestamp seeking + stepping
• streamRecovery
  • liveStreamRecovery: Automatically restart live streams if too many download errors happened e.g. to get over missing segments.
• ssai
  • Google AdManager: Use Google AdManager for Server-side ad insertion (SSAI)
  • Yospace: Use Yospace for Server-side ad insertion
• subtitles
  • customSubtitleDisplay: Render subtitles using the ON_CUE_ENTER and ON_CUE_EXIT player events.
• vue
  • vueJs: Using the Bitmovin Player within a vue.js component
• webpack-demo
  • buildPlayerWithWebpack: Build the Bitmovin HTML5 Player using webpack.
• webapi-pip
  • pictureInPicture: Integrate the Bitmovin HTML5 Player with the Picture-In-Picture(PiP) Web Api
• Media Session API: Leverage the browser's Media Session API to show the user in system notifications what's being played and control the player from there.
• CMCD: Enable Common Media Client-Data (CMCD) to be send along with requests to the CDN.

Sample Apps Setup Instructions

1. Sign up for free
2. Get your personal key from the player licenses page
3. Checkout the sample provided in this repository
4. Add the player key to the player configuration in the example you want to use
5. Enjoy best adaptive streaming performance!

Generate Content The Easy Way

To generate MPEG-DASH & HLS content on your own, please have a look at the encoding section and give it a free try!

Additional Demos and Documentation

Additional demos can be found in our demo area. For more information on our rich API and player configuration, we refer to our documentation.

www.bitmovin.com

Documentation & Release Notes

• Web API Reference documentation - You can find the latest one here
• Web SDK Release Notes can be found here

Support

If you have any questions or issues with this SDK or its examples, or you require other technical support for our services, please login to your Bitmovin Dashboard at https://bitmovin.com/dashboard and create a new support case. Our team will get back to you as soon as possible :+1: