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 an MPEG-DASH stream from Wowza Streaming Engine™ media server software to the Bitmovin 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 an application
- In Wowza Streaming Engine Manager, click the Applications tab at the top of the page.
- In the Applications contents panel, click live or vod, and then click Edit.
- Confirm the MPEG-DASH playback type is selected, and then click Save.
- Restart the application.
- 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 get the latest version of the Bitmovin Adaptive Streaming Player and Bitmovin Portal, create an 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.
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.
<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 Streaming Engine server (default port is 1935).
- The [application] placeholder is the name of your Wowza Streaming Engine 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.
<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).
Notes:
- All options in the config object are case sensitive.
- For a complete list of configuration options, see the Bitmovin Adaptive Streaming Player Configuration documentation.
- You can find default player embed code by navigating to the Player > Embed page in the Bitmovin Portal.
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>
VOD playback example
This example re-streams the [install-dir]/content/sample.mp4 video file included in every Wowza Streaming Engine 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
