This article describes how to use the castLabs DASH Everywhere player with Wowza Streaming Engine™ media server software. The DASH Everywhere interoperable player for web browsers simplifies playback of MPEG-DASH, Microsoft Smooth Streaming, and Apple HLS video content.
Contents
Set up streaming applications in Wowza Streaming Engine
Set up castLabs DASH Everywhere player for streaming from Wowza Streaming Engine More resources
Set up streaming applications in Wowza Streaming Engine
To stream to the DASH Everywhere player, you must set up or create streaming applications in Wowza Streaming Engine Manager. The following procedure guides you through setting up the default live and vod applications, which are included in default Wowza Streaming Engine software installations, to enable delivery of unencrypted video to the DASH Everywhere player.
Note: For instructions on how to deliver encrypted video using the castLabs DRMtoday service, see Set up castLabs DRMtoday secure video delivery in Wowza Streaming Engine.
- In Wowza Streaming Engine Manager, click the Applications tab at the top of the page.
- In the Applications contents panel, click live (for live streaming) or vod (for on-demand streaming), and then click Edit.
Note: This procedure uses the installed live and vod applications. If you want to create a new streaming application, click Add Application in the contents panel, and then click Live or VOD. - On the application page, select the MPEG-DASH, Apple HLS, and Microsoft Smooth Streaming playback types, and then click Save.
- Restart the application.
- If you set up an application for live streaming, connect live video from a camera or encoder to it by following the instructions in Connect a live source to Wowza Streaming Engine.
If you set up an application for on-demand streaming, copy your encoded video files to your VOD application's content directory. If you didn't change any of the application's default values, upload the files to the content folder in the Wowza Streaming Engine installation ([install-dir]/content). If you changed the application's Content Directory setting to an application-specific directory (${com.wowza.wms.context.VHostConfigHome}/content/[application-name]) or to a fully customized location on the media server, upload the files to these alternate locations.
Set up castLabs DASH Everywhere player for streaming from Wowza Streaming Engine
After you purchase the DASH Everywhere player, you'll be provided with a player release package that has all of the required libraries and a sample integration webpage (index_min.html) that you can use as template in this setup procedure.
Put the index_min.html and cldasheverywhere.min.js files and dashas and dashcs folders on your web server. Then you can point the player to your Wowza Streaming Engine stream as shown below.
To include the cldasheverywhere.min.js and video-js.css libraries in your webpage, copy the following into the HEAD section of the webpage code:
<link href="http://vjs.zencdn.net/4.11.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.11.4/video.js"></script>
<style>
.vjs-default-skin .vjs-audiotracks-button:before { content: "e600"; /* cog icon */ }
.vjs-default-skin .vjs-texttracks-button:before { content: "e00c"; /* subtitles icon */ }
</style>
<script src="cldasheverywhere.min.js"></script>
<video id="vid" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" width="640px" height="480px"> </video>
var config, player;
var config = {
"silverlightFile": "./dashcs/dashcs.xap",
"flashFile": './dashas/dashas.swf',
"techs": ['dashjs','dashas','dashcs']
};
player = videojs('vid', {
plugins: {
audiotracks: {
title: 'Languages'
},
texttracks: {
title: 'Subtitles'
}
},
autoplay: true,
controls: true,
dasheverywhere: config,
techOrder: ['dasheverywhere']
});
Note: A full list of available configuration options is available in the DASH Everywhere Manual, which is included in the product release package.
player.loadVideo("http://[wowza-ip-address]:[port]/[application]/[stream-name]/manifest.mpd", {});
- 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.
Example for live streaming from Wowza Streaming Engine
In the following example, DASH Everywhere plays a live stream named myStream from the Wowza Streaming Engine live application.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>castLabs DASH Everywhere Player Integration example</title>
<link href="http://vjs.zencdn.net/4.11.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.11.4/video.js"></script>
<style>
.vjs-default-skin .vjs-audiotracks-button:before { content: "e600"; /* cog icon */ }
.vjs-default-skin .vjs-texttracks-button:before { content: "e00c"; /* subtitles icon */ }
</style>
<script src="cldasheverywhere.min.js"></script>
</head>
<body>
<video id="vid" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" width="640px" height="480px"></video>
<script>
//Init player
var config, player;
var config = {
"silverlightFile": "./dashcs/dashcs.xap",
"flashFile": './dashas/dashas.swf',
"techs": ['dashjs','dashas','dashcs']
};
player = videojs('vid', {
plugins: {
audiotracks: {
title: 'Languages'
},
texttracks: {
title: 'Subtitles'
}
},
autoplay: true,
controls: true,
dasheverywhere: config,
techOrder: ['dasheverywhere']
});
player.loadVideo("http://[wowza-ip-address]:1935/live/myStream/manifest.mpd", {});
</script>
</body>
</html>
Example for on-demand streaming from Wowza Streaming Engine
In the following example, DASH Everywhere plays the [install-dir]/content/sample.mp4 video file included in your Wowza Streaming Engine installation from the Wowza Streaming Engine vod application.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>castLabs DASH Everywhere Player Integration example</title>
<link href="http://vjs.zencdn.net/4.11.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.11.4/video.js"></script>
<style>
.vjs-default-skin .vjs-audiotracks-button:before { content: "e600"; /* cog icon */ }
.vjs-default-skin .vjs-texttracks-button:before { content: "e00c"; /* subtitles icon */ }
</style>
<script src="cldasheverywhere.min.js"></script>
</head>
<body>
<video id="vid" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" width="640px" height="480px"></video>
<script>
//Init player
var config, player;
var config = {
"silverlightFile": "./dashcs/dashcs.xap",
"flashFile": './dashas/dashas.swf',
"techs": ['dashjs','dashas','dashcs']
};
player = videojs('vid', {
plugins: {
audiotracks: {
title: 'Languages'
},
texttracks: {
title: 'Subtitles'
}
},
autoplay: true,
controls: true,
dasheverywhere: config,
techOrder: ['dasheverywhere']
});
player.loadVideo("http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/manifest.mpd", {});
</script>
</body>
</html>
