How to use the Bitmovin Adaptive Streaming Player with Wowza Streaming Engine (MPEG-DASH)

Originally Published on 07/12/2016 | Updated on 03/13/2017 8:43 am PDT

The Bitmovin Adaptive Streaming Player is a native HTML5 MPEG-DASH and Apple HLS player designed for streaming videos with low start up delay and no buffering. DRM support is included with both free and paid versions of the Bitmovin player. This article contains instructions for embedding the Bitmovin player into a webpage and sending a Wowza Streaming Engine™ stream to that player.

Contents

Getting started Set up the Bitmovin Adaptive Streaming Player
Playback examples More resources

Getting started

To stream to the Bitmovin player, you must create or set up an application for live streaming with MPEG-DASH playback enabled in Wowza Streaming Engine Manager. You can also use the video on demand instructions in this section to set up the vod application that's included with Wowza Streaming Engine and is part of the Wowza media server installation.

Configure a live application

The example below will guide you through creating or configuring a live application to use with the player. The example uses an application named live, which is included in default Wowza Streaming Engine software installations.

To configure a live application:
 
  1. In Wowza Streaming Engine Manager, click the Applications tab at the top of the page.
     
  2. Configure the live application:
     
    1. In the Applications contents panel, click live, and then click Edit. (This example uses the installed live application. If you want to create a new live streaming application, click Add Application in the contents panel, and then click Live. Follow the instructions on the screen.)


       
    2. On the live page, select the MPEG-DASH playback type, and then click Save.

  3. Restart the application.


     
  4. To test your stream with the Bitmovin player before setting up a personalized player, use the Bitmovin Stream Test.

Configure an on demand application

The example below will guide you through creating or configuring an on demand application to use with the Bitmovin player. The example uses an application named vod, which is included in default Wowza Streaming Engine software installations and uses the sample video file [install-dir]/content/sample.mp4.

To configure an on demand application:
 
  1. In Wowza Streaming Engine Manager, click the Applications tab at the top of the page.
     
  2. Configure the vod application:
     
    1. In the Applications contents panel, click vod, and then click Edit. (This example uses the installed vod application. If you want to create a new live streaming application, click Add Application in the contents panel, and then click VOD. Follow the instructions on the screen.)


       
    2. On the vod page, select the MPEG-DASH playback type, and then click Save.

  3. Restart the application.


     
  4. To test your stream with the Bitmovin player before setting up a personalized player, use the Bitmovin Stream Test.

Set up the Bitmovin Adaptive Streaming Player

To access the latest version of the Bitmovin Adaptive Streaming Player and Bitmovin Portal, create a new account on the Bitmovin website. To view your player Key, the CDN location of player files, the number of generated impressions for the current month, and other account details, navigate to the Player Licensing Overview section (found in the Player > Overview page) of the Bitmovin Portal web application.
 
Note: To use a self-hosted player, click Player > Embed in the Bitmovin Portal, and then click Download the player. Then, add the contents of the bitdash-player.zip file to your webpage and make sure to change the path in the <script src> tags in the examples below.
To include the JS player in your webpage, copy the following code snippet into the HEAD section of the webpage code:
  
<script src="//bitmovin-a.akamaihd.net/bitmovin-player/stable/5/bitdash.min.js"></script>;
To provide instructions for the player, copy the following script and config object into the BODY section of your webpage:
  
<script type="text/javascript>
   var conf = {

      key : '[player-key]',

      source: {
         dash: 'https://[wowza-ip-address]:[port]/[application]/[stream-name]/manifest.mpd'
      }
   }
</script>
Where:
 
  • The [player-key] placeholder is the (string) Key that that is bound to your Bitmovin account. It can be found in the Player Licensing Overview section of the Bitmovin Portal.
     
  • The [wowza-ip-address]:[port] placeholder is the IP address and port of your Wowza media server (default port is 1935).
     
  • The [application] placeholder is the name of your Wowza media server application (such as live or vod).
     
  • The [stream-name] placeholder is the name of your stream in that application. 
Note: For more information on manifest profiles and MPD URL syntax, see How to do MPEG-DASH streaming.
To add the player to the webpage and apply the configuration options, add an HTML container element before the config object and pass the unique ID of the element to Bitmovin after the config object:
  
<body>

   <div id="[player-wrapper]"></div>

   <script type="text/javascript>
      var conf = {
         key : '[player-key]',
         source: {
            dash: 'https://[wowza-ip-address]:[port]/[application]/[stream-name]/manifest.mpd'
        }
      }

    var player = bitdash('[player-wrapper]');
    player.setup(conf).then(function(value) {
        // Success
        console.log("Successfully created bitdash player instance");
    }, function(reason) {
        // Error!
        console.log("Error while creating bitdash player instance");
    });

   </script>
</body>
Where:
 
  • The [player-wrapper] placeholder is an example for any page-wide unique ID of an HTML element (usually a div element or another container) where the player will be inserted.
     
  • The [config] placeholder is a JSON object holding the configuration options for the player (including your player key, manifest file, poster image, size, aspect ratio, etc).
Notes:

Playback example

The following playback examples include a minimal player configuration on a sample webpage for both a live and video on demand source.

Live playback example

<html>
  <head>
    <script type="text/javascript" src="//bitmovin-a.akamaihd.net/bitmovin-player/stable/5/bitdash.min.js"></script>
  </head>
  <body>
    <div id="player"></div>
    <script type="text/javascript">
      var conf = {
        key: "[player-key]",
        source:    {
          dash: "https://[wowza-ip-address]:1935/live/myStream/manifest.mpd"
        }
      };
      bitdash("player").setup(conf);
    </script>
  </body>
</html>

Video on demand playback example

This example re-streams the [install-dir]/content/sample.mp4 video file included in your Wowza media server installation.
  
<html>
  <head>
    <script type="text/javascript" src="//bitmovin-a.akamaihd.net/bitmovin-player/stable/5/bitdash.min.js"></script>
  </head>
  <body>
    <div id="player"></div>
    <script type="text/javascript">
      var conf = {
        key: "[player-key]",
        source:    {
          dash: "https://[wowza-ip-address]:1935/vod/mp4:sample.mp4/manifest.mpd"
        }
      };
      bitdash("player").setup(conf);
    </script>
  </body>
</html>

More resources

If you're having problems or want to discuss this article, post in our forum.

Was this article helpful?
Thank you for your feedback!

Thank you for providing feedback to help us improve our documentation!

If you need immediate help for an urgent issue, open a support ticket to get help from one of our technical support engineers. (You must have a valid Maintenance and Support contract to get technical support.)

© 2005–2017 Wowza Media Systems, LLC. All rights reserved.   Terms Privacy Trademarks Legal