Quickstart Basic Video On Demand (VOD) with Media Services

This article shows you how to do the basic steps for delivering a basic video on demand (VOD) application with Azure Media Services and a GitHub repository. All the steps happen with your web browser from our documentation, the Azure portal, and GitHub.

Final application

The basic VOD application you will be creating will have:

  • One Media Services account
  • One started streaming endpoint
  • One storage account mapped to Media Services
  • One asset that will contain encoded media files as well as manifests and other files needed for streaming
  • One streaming locator that will provide streaming URLs
  • One very simple web application that streams the encoded file with the URL

basic video on demand streaming architecture diagram

Workflow

  1. Upload files.
  2. Media Services creates an asset to house the mezzanine file. This will be the input asset.
  3. Choose an encoding preset.
  4. Create a transform that uses the chosen preset.
  5. Create a job that runs the transform on the uploaded file in the asset.
  6. The job creates an output asset that houses the transformed files along with files needed for streaming.
  7. Create a streaming locator that uses a streaming policy. The streaming locator provides streaming URLs for the streaming application to use.
  8. Create a streaming application on GitHub and use the streaming URLs with the media player.
  9. Start the streaming endpoint.
  10. Watch the video.

basic video on demand streaming workflow diagram

Prerequisites

  • Create a Media Services account. When you set up the Media Services account, a storage account, a user managed identity, and a default streaming endpoint will also be created.
  • One MP4 video to use for this exercise.
  • Create a GitHub account if you don't have one already, and stay logged in.
  • Create an Azure Static Web App.

Note

You will be switching between several browser tabs or windows during this process. The below steps assume that you have your browser set to open tabs. Keep them all open.

Upload videos

You should have a media services account, a storage account, and a default streaming endpoint.

  1. Navigate to the Media Services account you want to work with.
  2. Select Assets. Assets are the containers that are used to house your media content.
  3. Select Upload. The Upload new assets screen will appear.
  4. Select the storage account you created for the Media Services account from the Storage account dropdown menu. It should be selected by default.
  5. Select the file folder icon next to the Upload files field.
  6. Select the media files you want to use. An asset will be created for every video you upload. The name of the asset will start with the name of the video and will be appended with a unique identifier. You could upload the same video twice and it will be located in two different assets.
  7. You must agree to the statement "I have all the rights to use the content/file, and agree that it will be handled per the Online Services Terms and the Microsoft Privacy Statement." Select I agree and upload.
  8. Select Continue upload and close, or Close if you want to watch the video upload progress.
  9. Repeat this process for each of the files you want to stream.

Select ContentAwareEncoding for the preset name selection step below.

Create a transform with the portal

  1. Navigate to the Media Service account you want to work with.
  2. Select Transforms + jobs.
  3. Select Add transform. The Add transform screen will appear.
  4. Enter a transform name in the Transform name field.
  5. Select the Encoding radio button.
  6. Select the prest you want to use from the Built-in preset name dropdown list.
  7. Select Add.

Stay on this screen for the next steps.

Next, you'll create a job which is for telling Media Services which transform to run on files within an asset. The asset you choose will be the input asset. The job will create an output asset to contain the encoded files as well as the manifest.

Create a job in the portal

  1. Navigate to the Media Services account you want to work with.
  2. Select Transforms + jobs from the menu.
  3. Select the transform you want to use for the job. The transform screen will appear.
  4. Select Add job. The Create a job screen will appear.
  5. For the Input source, the Asset radio button should be selected by default. If not, select it now.
  6. Select Select an existing asset. The Select an asset screen will appear.
  7. Select one of the assets in the list. You can only select one at a time for the job.
  8. Select the Use existing radio button.
  9. Select a transform from the Transform dropdown list.
  10. Under Configure output, default settings will be auto-Spopulated. You can leave them as they are or change them.
  11. Select Create.
  12. Select Transforms + Jobs.
  13. You'll see the name of the transform you chose for the job. Select the transform to see the status of the job.
  14. Select the job listed under Name in the table of jobs. The job detail screen will open.
  15. Select the output asset from the Outputs list. The asset screen will open.
  16. Select the link for the asset next to Storage container. A new browser tab will open and You'll see the results of the job that used the transform. There should be several files in the output asset such as:
    1. Encoded video files with .mpi and .mp4 extensions.
    2. A XXXX_.ism file.
    3. A XXXX.isc file.
    4. A ThumbnailXXXX.jpg file.

Once you've viewed what is in the output asset, close the tab. Go back to the asset browser tab.

In order to stream your videos you need a streaming locator.

Create a streaming locator in the portal

  1. Navigate to the Media Services account you want to work with.
  2. Select Assets from the menu. The assets screen will appear.
  3. Under Streaming locators, select + New streaming locator. The Add streaming locator screen will appear.
  4. Enter a name for the streaming locator in the Name field, if you want to change the default name.
  5. Select a streaming policy from the Streaming policy dropdown list.
  6. If you have created a content key policy, select the content key policy from the Content key policy dropdown list.
  7. Set the Expiration time if needed.
  8. If you have created an asset filter, select the asset filter from the Filters dropdown list.
  9. Enter a streaming locator Id in the Streaming locator ID field if you want to configure the ID yourself. Otherwise, a streaming locator will be generated for you.
  10. Select New streaming locator. The Add streaming locator screen will appear and a default name for the locator will appear. You can change it or leave it as is.
  11. Select the Streaming policy policy that you want to use from the dropdown list.
  12. Select Add. The video will start playing in the player on the screen, and the Streaming URL field will be populated.
  13. Select Show URLs in the Streaming locator list. The Streaming URLs screen will appear.

On this screen, you'll see that the streaming endpoint that was created when you created your account is in the Streaming endpoint dropdown list along with other data about the streaming locator.

If the streaming endpoint is not yet started, start it now.

In the streaming and download section, you'll see the URLs to use for your streaming application. For the following steps, you'll use the URL that ends with (format=m3u8-cmaf). Keep this browser tab open as you'll be coming back to it in a later step.

Create a web page with a video player client

Assuming that you created a Static Web App, you'll now change the HTML in the index.html file. If you didn't create a web app with Azure, you can still use this code where you plan to host your web app.

  1. If you aren't already logged in, sign in to GitHub and navigate to the repository you created for the Static Web App.

  2. Navigate to the index.html file. It should be in a directory called src.

  3. Select the edit pencil icon to edit the file.

  4. Replace the code that is in the html file with the following code:

    <html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Basic Video on Demand Static Web App</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!--*****START OF Azure Media Player Scripts*****-->
            <!--Note: DO NOT USE the "latest" folder in production. Replace "latest" with a version number like "1.0.0"-->
            <!--EX:<script src="//amp.azure.net/libs/amp/1.0.0/azuremediaplayer.min.js"></script>-->
            <!--Azure Media Player versions can be queried from //aka.ms/ampchangelog-->
        <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
        <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
        <!--*****END OF Azure Media Player Scripts*****-->
    </head>
    <body>
        <h1>Clear Streaming Only</h1>
        <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{}' tabindex="0">
            <source src="put streaming url here" type="application/vnd.ms-sstr+xml" />
            <p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
        </video>
    </body>
    </html>
    
  5. Return to the Azure portal, Streaming locator browser tab where the streaming URLs are located.

  6. Copy the URL that ends with (format=m3u8-cmaf) under HLS.

  7. Return to the index file on GitHub browser tab.

  8. Paste the URL into the src value in the source object in the HTML.

  9. Select Commit changes to commit the change. It may take a minute for the changes to be live.

  10. Back in the Azure portal, Static web app tab, select the link next to URL to open the index page in another tab of your browser. The player should appear on the page.

  11. Select the video play button. The video should begin playing. If it isn't playing, check that your streaming endpoint is running.

Clean up resources

If you don't intend to further develop this basic web app, make sure you delete all the resources you created or you'll be billed.