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

The Bitmovin Adaptive Streaming Player is a native HTML5 MPEG-DASH and Apple HLS player designed for streaming videos with low startup 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 Tool.

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 Tool.

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.
  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/7/bitmovinplayer.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's 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.

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 = bitmovin.player('[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).

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/7/bitmovinplayer.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"
        }
      };
      bitmovin.player("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/7/bitmovinplayer.js"></script>
  </head>
  <body>
    <div id="player"></div>
    <script type="text/javascript">
      var conf = {
        key: "[wowza-ip-address]:1935/vod/mp4:sample.mp4/manifest.mpd"
        }
      };
      bitmovin.player("player").setup(conf);
    </script>
  </body>
</html>]",>

More resources

---

• Bitmovin website
• Bitmovin Portal (Bitmovin account required)
• Bitmovin Adaptive Streaming Player documentation

---

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