Show search and navigation.

 

Dynamic Cloud Packaging: How to Stream On-Demand Content

Applies To:
HTTP LargeThis platform has been optimized to cache and deliver static content (e.g., HTML, CSS, JavaScript, ISO, multimedia, and software downloads, etc.) over HTTP or HTTPS.
Dynamic Cloud PackagingThis streaming solution facilitates HLS and/or MPEG-DASH playback of live or on-demand content. A live stream may be pushed to this service via RTMP.

On-demand content can be streamed over the HTTP Large platform to media players that support either HLS or MPEG-DASH.

This service automatically transmuxRefers to the process of changing the multimedia container while retaining its content (i.e., audio/video).es H.264 encoded live content into a HLS/MPEG-DASH-compatible package.

Step 1: Upload On-Demand Content

Stream on-demand content from either CDN storage or a customer origin.

Verify that the desired H.264 media has been uploaded to either:

This service supports the dynamic streamingAllows a media player to dynamically switch between bit rate streams of varying quality levels, in order to provide an optimal viewing experience based on a client’s bandwidth and CPU usage. of multiple assets of varying quality stored within a single directory.

Step 2: Implement a Media Player

On-demand content may be played back using either a HLS or MPEG-DASH player.

Implement one of the following players:

ClosedBasic HLS Player

Follow these steps to create a web page that streams on-demand content using HLS implemented via HTML5.

  1. Copy the HLS playback URL corresponding to either CDN storage or a customer origin from the Dynamic Cloud Packaging - VOD page.
  2. Edit the desired web page to include a video tag.
  3. Set the "src" attribute to the playback URL copied in step 1.
  4. Customer Origin Only: Append the name of the desired customer origin to the playback URL.
  5. Append the path to the directory containing the on-demand content identified earlier in this tutorial (Step 1: Upload On-Demand Content).

  6. Identify the desired asset(s) that will be streamed by appending the following value to the playback URL.

    Single asset syntax:

    FilenameRepresents the filename of the desired H.264 asset..mp4

    Multiple assets syntax:

    BaseFileNameRepresents the base filename of the desired media.,BitRate1A bit rate must be specified for each file that may be streamed via this playback URL.,BitRate2,BitRateN,.mp4
  7. Append the ".m3u8" file extension to the filename defined in the previous step.

  8. Verify that the video tag looks similar to the ones defined below:

    <!DOCTYPE html>
<html>
	<head>    
		<title>Dynamic Cloud Packaging - On-Demand Streaming Example (HLS)</title>
	</head>
	<body>
		<p>Content may be streamed from CDN storage: </p>
		<video src="http://wpc.0001.{Base Domain}/040001/videos/presentation1.mp4.m3u8" height="300" width="400">
		</video>
		<p>Or, it may be streamed from a customer origin: </p>
		<video src="http://wpc.0001.{Base Domain}/840001/myorigin/videos/presentation1.mp4.m3u8" height="300" width="400">
		</video>
	</body>
</html>
ClosedBasic MPEG-DASH Player

Follow these steps to create a web page that leverages dash.js to stream on-demand content.

  1. Upload the desired version of DASH player code (e.g., dash.all.js) to CDN storage or a customer origin.

    This tutorial assumes that version 1.5.1 of dash.all.js resides in the same directory as the web page created in this tutorial.

    Download v. 1.5.1 of dash.js.

    Learn more about dash.js.

  2. Create a web page using the following code:

    <!DOCTYPE html>									                                    
<html>
<head>
    <head>    
		<title>Dynamic Cloud Packaging - Live Streaming Example (MPEG-DASH)</title>
		<script src="dash.all.js" type="text/javascript"></script>
		<script>
			function init()
			{
				var video = document.querySelector("#video1");
				var context = new Dash.di.DashContext();
				var player1 = new MediaPlayer(context);
				var playbackurl = "<Playback-URL>";
								
				player1.startup();
				player1.attachView(video);
				player1.setAutoPlay(true);
				player1.attachSource(playbackurl);			
				
			}			
		</script>
		<style>        
			video {
			   width: 640px;
			   height: 360px;
			}
		</style>
	</head>
	<body onload="init()">
		<video id="video1" controls="true"></video>
	</body>
</html>
  3. Copy the MPEG-DASH playback URL corresponding to either CDN storage or a customer origin from the Dynamic Cloud Packaging - VOD page.
  4. Set the playbackurl variable to the playback URL copied in the previous step.
  5. Customer Origin Only: Append a forward slash and the name of the desired customer origin to the playback URL (e.g., /myorigin).
  6. Append a forward slash and the path to the directory containing the on-demand content identified earlier in this tutorial (Step 1: Upload On-Demand Content).

  7. Identify the desired asset(s) that will be streamed by appending a forward slash and the following value to the playback URL.

    Single asset syntax:

    FilenameRepresents the filename of the desired H.264 asset..mp4

    Multiple assets syntax:

    BaseFileNameRepresents the base filename of the desired media.,BitRate1A bit rate must be specified for each file that may be streamed via this playback URL.,BitRate2,BitRateN,.mp4
  8. Append the ".mpd" file extension to the filename defined in the previous step.

  9. Verify that the line that sets the playbackurl variable looks similar to this code excerpt:

    				var playbackurl = "http://wpc.0001.{Base Domain}/040001/videos/presentation1.mp4.mpd";

Upload the above web page to CDN storage or a customer origin server.

Stream the on-demand content identified in step 1 by loading the web page.