Video Player

[stsrki]

closes #3265

The video component is based on Plyr and supports:

• Source parameter can accept string and complex object(VideoSource)
• HLS and DASH streaming videos. Requires explicitly defining it with StreamingLibrary parameter
• Dynamic update of video settings
• Events coming from Plyr

[stsrki]

@sturlath I'm trying to run this but I'm unable to make it work. It seems shaka player it not made as a JS module and because of that import is failing. Any ideas on how to proceed?

BTW, I found this https://github.com/Blazored/Video. It might be a good idea to make it like that since it seems like native JS is used without external libraries.

[stsrki]

Also seems like a good alternative https://github.com/sampotts/plyr

We could create a Video component as an extension for Blazorise if the native way deems to be imposible.

[sturlath]

@sturlath I'm trying to run this but I'm unable to make it work. It seems shaka player it not made as a JS module and because of that import is failing. Any ideas on how to proceed?

BTW, I found this https://github.com/Blazored/Video. It might be a good idea to make it like that since it seems like native JS is used without external libraries.

Sorry I don't know how to proceed with that.. very low on js fu here sorry...

This Blazored player doesn´t support streaming (only static files) so I couldn't use that. I had looked at it and when I was doing that I was warned away from plyr.io with "it looks like it is NOT a streaming player. Meaning it does not support HLS or DASH streaming formats".

But I did try to use plyr and maybe that can work if using these integrations that they mention and link to "support for hls.js, Shaka and dash.js streaming playback" ?

Would that mean it would possible to incorporate those integration like they link to https://codepen.io/pen?template=ZRpzZO
or are we then back were we started?

[sturlath]

@johndeu since we have had many lengthy dialogs about streaming players and Blazor you might be interested and have input into this experiment

[stsrki]

Dash.js seems to work just fine with Plyr. I can now proceed with adding more configuration settings and more events for the video playback.

Also, I think it would be best to move the Video component to be a separate Blazorise extension since we need to have multiple large JS files and it would unnecessarily increase the Blazorise size.

[johndeu]

Thanks for the heads up. Can you guys also test with HLS streaming as well?
HLS will be more popular in North America, where as DASH is more prevalent in Europe these days.

HLS overall will have higher support - and you should be testing with the CMAF version of HLS

For AMS, that would be the /manifest(format=m3u8-cmaf) URL path on the streaming locator. If you get this working you could add it to our 3rd party player projects repository as an example for using Blazor based player.
https://github.com/Azure-Samples/media-services-3rdparty-player-samples

[stsrki]

@johndeu Thank you for the advice. I must admit I'm far from an expert on video technology. After a little investigation, I believe HLS would be a better choice. It has better compatibility across browsers and has a much lower size. In terms of features, both HLS and DASH are similar. The only problem with HSL was that I had to transpile it from the source by using the globalObject: 'window' so that I would be able to import it as an ES6 module. It is working just fine at the moment.

I'm also thinking of supporting both but that can wait for the future.

[sturlath]

@johndeu Wouldn´t having only HLS (for now of course) mean that you couldn´t play DRM content except on Apple stuff?

I then read this comment here

Hls.js doesn't support PlayReady (Microsoft (Edge,IE11)

If you are looking for more established DRM support for both HLS & DASH, I honestly recommend rather Shaka Player as a solution. It will work on the same platforms as Hls.js and is otherwise a good solution as well.

These are of course selfish reasons on my end because I personally need DRM to stream (and to Microsoft/Google/Apple things) but thats probably not something that everybody needs..

For your info @stsrki I do this for my public website. I have to give Azure Media Player i (going to swap it out for Shaka) information about the DRM settings (I also have access token to the service)

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls preload="auto" width="640" height="400" poster="" data-setup='{"logo": { "enabled": false}}' tabindex="0">
    <source src="@Model.LiveStreamUrl" type="application/vnd.ms-sstr+xml" data-setup='{"protectionInfo": [{"type":"PlayReady","authenticationToken": "@Model.Token"},{"type":"Widevine","authenticationToken": "@Model.Token"}]}'/>
</video>

Dash vs Hls as I understand it
Dash = PlayReady (Microsoft) and Widevine (Google) for Microsoft Edge, Internet Explorer 11 Chrome,Firefox and Opera)
Hls = FairPlay (Apple) for Safari,iOS 11 or later,iPhone 8 or later macOS High Sierra with Intel 7th Generation CPU)

[stsrki]

@sturlath I will leave both. Later I can optimize it somehow to not load unnecessary JS modules if needed.

@johndeu I have added really basic video detection based on file extension 9df9731 to know if I should load it with HLS or DASH. It's just to make a POC. Do you know of other better ways to do this detection? Sorry to bother you but since @sturlath already added you to the discussion I really don't have anyone else to ask for 😅

[johndeu]

Extension of m3u8 is not always going to be there. There are some services like AMS that do not provide the m3u8 extension

You may be better off looking at the content-type on the manifest request.

For example DASH is normally Content-Type: application/dash+xml
and HLS would be Content-Type: application/vnd.apple.mpegurl

[stsrki]

@johndeu Thank you, I think I will be OK for now :)

Not for me:

• https://reference.dashif.org/dash.js/latest/samples/drm/widevine.html
• https://reference.dashif.org/dash.js/latest/samples/drm/playready.html

[stsrki]

@sturlath do you have oe know of any example of Fairplay with hlsjs?

[sturlath]

Sorry @stsrki I have been AFK. I was going to answer your DRM question but I see that you have that covered but I´ll give a super high over view in my words

DRM (Digital Rights Management), if implemented users can´t directly record or screen capture the stream.
Token for stream is then needed to make the stream un-watchable aka user can´t decrypt the stream without it.

But you probably knew that 😊

Then for hls.js Fairplay support, I came across this comment here

... hls.js does not include Fairplay support.

followed by

I suggest that you not use hls.js in Safari and instead use the native HTMLVideoElement support for HLS streams. Apple provides a Fairplay EME example with their server SDK found at https://developer.apple.com/streaming/fps/

BUT there looks to be a 23 days old PR that might solve it 🔥

Then I also found this fairplay-widgetjs (don´t know more about it)

[stsrki]

@sturlath Thanks for responding.

Seems that fairplay-widgetjs is not an option according to their requirements: This SDK requires vue.js and jQuery.

---

For now, I can leave FairPlay out. We have PlayReady and Widevine covered. Later if something changes, or that PR gets merged we can easily implement it.

[stsrki]

It's really hard to find anything related to a working example of DRM with HLS. Their documentation is practically unusable.

@sturlath Do you have any HLS video URL with DRM so I can test it?

[johndeu]

Its tough to setup, because you have to use FairPlay DRM - which is only available on an iOS device of course, so easiest place to test is on a Mac mini or Airbook if you have access to one. That said, you also have to request a Fairplay certificate from Apple first before you can use it at all. You can ping me on email internally and I can connect you with some folks who know how the process works.

[stsrki]

Unfortunately don't have a Mac and don't know anyone close that has it :(

[sturlath]

But it would also work on IPhone/IPad etc. So if you have that somewhere we could test it. I got an IPhone so I could test.

Regarding a DRM a Fairplay HLS DRM stream that is one thing I haven't implemented (on my 2 week schedule) and when I have that up and running we can schedule a streaming time for you to test. That is if @johndeu can´t get you a more official stream first?

But you can use these DRM streams here also http://openidconnectweb.azurewebsites.net/VHS , notice you can´t screen capture them..

[stsrki]

No iPhones either :(

The sources you have posted will help if I manage to do something with Macs, thanks.

Apart from these technical difficulties. I need to know how people might use the player. Do you usually just use one video stream type or do you switch between HLS or DASH compatible video? This I need to know so that I can update the necessary internals dynamically once the source video changes. But if it's not the case I can postpone that feature.

[sturlath]

There is always https://www.macincloud.com I have used that before for mobile development.

But yes switching between is the big one. You will need to detect the browser/environment and switch between. You provide the player with everything and then he picks depending on where he is running.

Here is a question on this topic here that might help.

And how I´m doing it in MVC with Azure Media Player (no FairPlay atm)

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls preload="auto" width="640" height="400" poster="" data-setup='{"logo": { "enabled": false}}' tabindex="0">
    <source src="@Model.LiveStreamUrl" type="application/vnd.ms-sstr+xml" data-setup='{"protectionInfo": [{"type":"PlayReady","authenticationToken": "@Model.Token"},{"type":"Widevine","authenticationToken": "@Model.Token"}]}'/>
</video>

[stsrki]

The component is now ready and most of the necessary features are now done. Both DASH and HLS can play video without any issue. DASH support for DRM is fully implemented, while HLS DRM will wait for the v1.1 version. There is not enough time at the moment.

[sturlath]

Awesome! Will it be in next release (0.9.5.5) or? I´m ready to try it out this weekend!

[stsrki]

It will be in v1.0. I can release a preview this weekend.

[stsrki]

The new Blazorise v1.0 preview 1 is now up and you can see the video component in action at https://preview.blazorise.com/docs/extensions/video

Please note that there are some breaking changes in v1. Unfinished release notes can be found at https://preview.blazorise.com/news/release-notes/100

[johndeu]

@stsrki - you may want to jump on this Q&A thread that I just saw and explain your project and work on this issue.
https://docs.microsoft.com/en-us/answers/questions/715715/how-to-play-a-azure-media-video-in-a-blazor-webass.html

[peterlegrand]

I did the "Install-Package Blazorise.Video" but I get the message "Install-Package : Unable to find package 'Blazorise.Video'".

Just for your information, I am not a very experienced developer and you might be interested, the project I am actually working on is a volunteer project to build a video platform for sustainability education for a US based non profit.

[sturlath]

@peterlegrand you need to tick the "Include prerelease" checkbox in the nuget package manager

[peterlegrand]

That is very strange. Even if I check that and also select all package sources it still doesn't show. Feeling rather stupid that I can't get this working.

[stsrki]

Did you set MyGet as a NuGet source? https://github.com/Megabit/Blazorise#try-preview