Can you use the Azure Media Player in a Blazor WASM app?

Sturla 176 Reputation points
2021-04-29T15:23:12.72+00:00

I have been trying to find information on this and trying out my self but with little success. Here is what I got but the video just stays blank.. https://blazorfiddle.com/s/grj0x977

Any tips and tricks for me?

Azure Media Services
Azure Media Services
A group of Azure services that includes encoding, format conversion, on-demand streaming, content protection, and live streaming services.
302 questions
0 comments
Accepted answer
  1. John Deutscher (MSFT) 2,126 Reputation points
    2021-04-29T19:29:22.093+00:00

    I tried it in your Blazor Fiddle and could not figure it out quickly. I've not seen anyone use it that way myself and don't have a ton of experience with Blazor yet.

    Try another player framework to see if you have any luck - like Shaka or HLS.js
    https://shaka-player-demo.appspot.com/docs/api/tutorial-basic-usage.html

    I'd recommend those alternate player frameworks for now over AMP, as the AMP player is getting a bit out of date.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. John Deutscher (MSFT) 2,126 Reputation points
    2021-05-14T19:13:15.83+00:00

    Key things to note are that when you use the .ism/manifest path - that will return a Smooth Streaming format manifest.
    Your player framework would need to support Smooth Streaming to handle that.

    I'm not familiar with Plyr.io, but on quick investigation it looks like it is NOT a streaming player. Meaning it does not support HLS or DASH streaming formats.

    It just says this - " Streaming - support for hls.js, Shaka and dash.js streaming playback"
    So if you are using that player framework, you still have to use HLS, Shaka or Dash.js to get streaming to work.

    I think that player is just a simple wrapper around the basic HTML5 video tag, which does not have streaming support on all browsers.

    To get HLS from AMS, you have to add the format=m3u8-cmaf to the URL
    To get DASH form AMS, you have to add format=mpd-time-cmaf to the URL

    See the documentation on dynamic packaging here - https://learn.microsoft.com/en-us/azure/media-services/latest/encode-dynamic-packaging-concept

    What you are in need of here is some player framework that can work in Blazor that support DASH or HLS streaming. I think your only and best choices are HLS.js, Shaka, and Dash.js.
    Video.js is an option as well, but if you want to use Live streaming, it does not actually have the best performance for lower latencies, so I don't recommend it right now.

    1 person found this answer helpful.