tgrviswanath / bitmovin-player-web-samples

Showcases build around the Bitmovin Adaptive Streaming Player, demonstrating usage and capabilities of the HTML5 based HLS and MPEG-DASH player, as well as the Flash based Fallback.

Bitmovin Adaptive Streaming Player for MPEG-DASH & HLS

This showcases are build around the Bitmovin Adaptive Streaming Player, demonstrating usage and capabilities of the HTML5 based HLS and MPEG-DASH player, as well as the Flash based fallback.

Demos

• 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.
• castReceiver
  • receiverApp: Example of a custom receiver app.
• 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.
• 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.
• frameaccurate
  • Frame Accurate Control: Bitmovin Player Wrapper for SMTPE timestamp seeking + stepping
• keyboard
  • keyboardSupport: Keyboard shortcuts for the Bitmovin Player.
  • keyboardCustom: Custom keyboard shortcuts for the Bitmovin Player.
• mobile
  • android MediaSessionAPI: Control playback via Android Notifications
• 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
  • separatedSubtitleAudioSettings: Extracted audio tracks and subtitle settings from the settings panel direct into the controlBar
  • labeling: Change Languages, Quality and Subtitles labels
• react
  • reactJs: Using the Bitmovin Player within a react component
• playlist
  • simplePlaylist: Build a playlist with the Bitmovin HTML5 Player API.
• requirejs-demo
  • buildPlayerWithRequirejs: Build the Bitmovin HTML5 Player using requirejs.
• streamRecovery
  • liveStreamRecovery: Automatically restart live streams if too many download errors happened e.g. to get over missing segments.
• ssai
  • dfp: Use Google DoubleClick for Server-side ad insertion (SSAI)
• 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.

Howto Install

1. Sign up for free at https://dashboard.bitmovin.com/signup
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 at https://developer.bitmovin.com/ and give it a free try!

Additional Demos and Documentation

Additional demos can be found in our demo area at https://bitmovin.com/demo/. For more information on our rich API and player configuration, we refer to https://developer.bitmovin.com/hc/en-us/categories/115000139893-Player.

www.bitmovin.com