How to play a Azure Media Video in a Blazor Webassembly app

Peter le Grand 21 Reputation points
2022-01-31T04:00:06.5+00:00

I am trying to play a Azure Media Service video in a Blazor Webassembly componenet.

the video works when I play it in Azure media player but I have difficulty getting this in a blazor component.

Also I have tried the following tag:

<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="images/EULogo.png" data-setup='{"nativeControlsForTouch": false}'>
<source src="https://siemsa-usct.streaming.media.azure.net/e544a02d-3490-410f-bcd5-bc91c5bda77e/videoplayback.ism/manifest(format=m3u8-aapl)" 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>

But it doesn't play either.

What is the best way to play a Azure Media Services video in a Blazor web assembly?

Thanks,

Peter

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.
317 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,595 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 66,866 Reputation points
    2022-01-31T16:20:30.2+00:00

    blazor wasm does not effect the browsers support of video or js. use the browsers debug tools to verify the <video> tag was generated correctly and the src is valid.

    also check that the azure js and css links loaded correctly.

    0 comments No comments

  2. John Deutscher (MSFT) 2,126 Reputation points
    2022-01-31T18:07:54.197+00:00

    Check in with the owners of this project called Blazorise.
    https://preview.blazorise.com/docs/extensions/video

    I know that they have been working hard on support for HLS and DASH playback in Blazor that works with Media Services.
    Check out the Issue history here - https://github.com/Megabit/Blazorise/pull/3298#issuecomment-1025123703


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.