0

I want to use Azure Blob Storage for Video Hosting. The videos are integrated in my Website via HTML Video Player:

<video controls>
  <source src="blobstorageurl" type="video/mp4">
  Your browser does not support HTML video.
</video>

So I created a blob container in which I upload the videos. An Azure Function (Blob Trigger) is observing this container. When a new video is uploaded, the Azure Function should start an AMS Job, with the new File as the source.

I used the logic of the official example (https://github.com/Azure-Samples/media-services-v3-node-tutorials/blob/main/AMSv3Samples/StreamFilesSample/index.ts).

Here is a small break down of my code:

const blobTrigger: AzureFunction = async function (context: Context, myBlob: any): Promise<void> {
  ...
  mediaServicesClient = new AzureMediaServices(creds, subscriptionId, clientOptions);
  let job = await mediaServicesClient.jobs.create(resourceGroup, accountName, transformName, jobName, { input: context.bindingData.uri, outputs: jobOutputs });
}

Which basically creates a new blob container with encoded files.

My Question is, how can I provide this file to my HTML Video Player. In the Tutorial they created a Streaming Locator, which I can't use for the HTML 5 Player. Can I use the blob directly? Or isn't it a good idea? And if yes, how can I provide it without any access key.

Nico Schuck
  • 832
  • 3
  • 15
  • 32

1 Answers1

1

First, you should make sure to understand the technical difference between what is called "progressive donwloading" a video file with the tag, vs. a real streaming solution that uses the HLS or DASH streaming protocols and "adaptive streaming". There are a lot of resources out there that explain the differences between the two and the customer experiences.

Basically, progressive download will involve a long buffering period for customers on poor networks, and won't be as fast or smooth of a playback experience if network conditions change (like on a cellular network for example.)

You can get the progressive download URL easily by just creating a SAS locator on the MP4 (make it public) in the storage account container, or you can deliver it through the Streaming Locator as well, if you set the streaming policy name to : 'Predefined_DownloadAndClearStreaming'. That will allow you to list the HLS, DASH, and SAS (progressive download) paths. You can also see this easier in the AMSE tool. See this for details on the built-in policy types ( you can also define custom policy types for streaming.) https://learn.microsoft.com/en-us/rest/api/media/streaming-locators/create

johndeu
  • 2,494
  • 1
  • 11
  • 10
  • Ok I created a streaming locator which contains hls, dash and downloads. I can use the download paths as src for html5 player and it works in "progressive download" way. The other two are not compatible with html5 player or am I wrong? – Nico Schuck Jun 30 '21 at 19:33
  • depends on the browser or OS. Some browser (like Safari) have built in support for HLS streaming in the Video tag. Microsoft Edge and Android browsers also support HLS natively in a video tag. But if you are serious about doing adaptive streaming, look at a player framework for your web page, like HLS.js, Shaka player, Dash.js, Video.js or others. Lots of options. – johndeu Jun 30 '21 at 21:21
  • Another good source of details - https://stackoverflow.com/questions/18434803/how-can-i-play-apple-hls-live-stream-using-html5-video-tag – johndeu Jun 30 '21 at 21:22
  • OK I see. The last question is, what is AMS providing by the HLS URL (like https://-gewc1.streaming.media.azure.net//.ism/manifest(format=m3u8-aapl))? When I try to use this endpoint, librarys like hls.js get a manifest-load-error. – Nico Schuck Jul 01 '21 at 07:01
  • That is the format tag for HLS v4 with Transport Stream (.ts) files. You can also use the following format tag (format=m3u8-cmaf) to get the CMAF (.mp4) based HLS manifest. Which is something I recommend. HLS.js should be working fine - i would need to check your manifest and see whats up. Is it latest version of HLS.js? Did you also try Shaka or other players and confirm? – johndeu Jul 07 '21 at 17:45