-
-
Notifications
You must be signed in to change notification settings - Fork 531
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Video Player #3298
Video Player #3298
Conversation
@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 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. |
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. |
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 |
@johndeu since we have had many lengthy dialogs about streaming players and Blazor you might be interested and have input into this experiment |
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 |
Thanks for the heads up. Can you guys also test with HLS streaming as well? 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. |
@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 I'm also thinking of supporting both but that can wait for the future. |
@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
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 |
@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 😅 |
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 |
@johndeu Thank you, I think I will be OK for now :) Not for me: |
@sturlath do you have oe know of any example of Fairplay with hlsjs? |
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. But you probably knew that 😊 Then for hls.js Fairplay support, I came across this comment here
followed by
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) |
@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. |
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? |
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. |
Unfortunately don't have a Mac and don't know anyone close that has it :( |
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.. |
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. |
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> |
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. |
Awesome! Will it be in next release (0.9.5.5) or? I´m ready to try it out this weekend! |
It will be in v1.0. I can release a preview this weekend. |
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 |
@stsrki - you may want to jump on this Q&A thread that I just saw and explain your project and work on this issue. |
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. |
@peterlegrand you need to tick the "Include prerelease" checkbox in the nuget package manager |
Did you set MyGet as a NuGet source? https://github.com/Megabit/Blazorise#try-preview |
closes #3265
The video component is based on Plyr and supports:
Source
parameter can acceptstring
and complex object(VideoSource)StreamingLibrary
parameter