search

Blazored / Video

The easiest html5 video implementation for Blazor applications
https://blazored.github.io/Video
MIT License
124 stars 28 forks source link

Added Common Methods and Properties #4

Closed JPVenson closed 1 year ago

JPVenson commented 3 years ago

I have added (nearly) all methods and properties as described in https://www.w3schools.com/tags/ref_av_dom.asp to be called directly from an BlazoredVideo object.

SQL-MisterMagoo commented 3 years ago

Thanks very much for the PR - I'll find some time soon to check it out and hopefully merge!

chrislangston commented 3 years ago

@JPVenson Thanks for opening this PR! Using the code changes from this PR I was able to use it to workout the desired functionality I need to programmatically change the Source video url and then to start playing the next video in the list.

What I essentially have is a main video player that will start with the default video for a Module. There are usually multiple videos per module in a Playlist. The user can start playing the next one in the list if they so choose.

My use case is the following:

  1. When each video ends, play the next one in the list.
  2. If a Video has previously been played, then start the main video at the next one in the list.

I have done some by performing the following behavior. Does this look like the correct call flow in order to stop the currently playing video, set the new source and begin to play the desired next video?

<button @onclick="PlayNextVideo">Play Next Video</button>
        <BlazoredVideo @ref="MyBlazorVideo" TimeUpdateEvent="OnEvent" Play="OnPlay" Ended="OnEnded" CanPlay="OnCanPlay"
                       VideoEventOptions="options"
                       class="w-100"
                       style="max-width: 800px;"
                       controls="controls">
            <source src="@VideoSource" type="video/mp4" />
        </BlazoredVideo>
@code {
    BlazoredVideo MyBlazorVideo;
    public string VideoSource { get; set; }
    public int VideoIndex = 0;
    Dictionary<VideoEvents, VideoStateOptions> options = new Dictionary<VideoEvents, VideoStateOptions>();

    protected override void OnInitialized()
    {
        var option = new VideoStateOptions() { All = true };
        options[VideoEvents.CanPlay] = option;
        options[VideoEvents.Play] = option;
        options[VideoEvents.Ended] = option;
        options[VideoEvents.TimeUpdate] = option;

        Videos.Add("https://video1.mp4");
        Videos.Add("https://video2.mp4");
        Videos.Add("https://res.cloudinary.com/blazoredgitter/video/upload/v1557015491/samples/elephants.mp4");
        VideoSource = Videos[VideoIndex];
    }

    async Task PlayNextVideo()
    {
        VideoIndex++;
        if (VideoIndex <= Videos.Count - 1)
        {
            Logger.LogInformation($"PlayNextVideo Src: {MyBlazorVideo.Src} CurrentSrc: {MyBlazorVideo.CurrentSrc}");
            VideoSource = Videos[VideoIndex];

            await MyBlazorVideo.ReloadControl();

            await MyBlazorVideo.StartPlayback();
        }
    }
JPVenson commented 3 years ago

@chrislangston I have done essentially the same only with more "steps" in between but in essence your code should workout fine. Apart from proactivly calling StopPlayback before reloading the control your code looks ok

chrislangston commented 3 years ago

@chrislangston I have done essentially the same only with more "steps" in between but in essence your code should workout fine. Apart from proactivly calling StopPlayback before reloading the control your code looks ok

Thanks @JPVenson. Are there any other gotcha's that I should watch out for for example should we do any Dispose or unregister of Event Handlers before switching the source and reloading?

JPVenson commented 3 years ago

hmm not really, not for this case. Not as i have observed it as all eventhandlers seem to be removed of when the object is removed from DOM.

You should be careful to not try to start the playback while the pause promise is not yet completed as this will cancel the promise and will result in an error message. But this is just "for information" it does not seem to be effecting anything. if you are interested i can put my project on Github, I have wrapped the whole player to support my own controls.

chrislangston commented 3 years ago

hmm not really, not for this case. Not as i have observed it as all eventhandlers seem to be removed of when the object is removed from DOM.

You should be careful to not try to start the playback while the pause promise is not yet completed as this will cancel the promise and will result in an error message. But this is just "for information" it does not seem to be effecting anything. if you are interested i can put my project on Github, I have wrapped the whole player to support my own controls.

@JPVenson That would be fantastic if you can share your code! I would love to see all the advanced stuff you are doing.

JPVenson commented 3 years ago

@chrislangston this is the repro: https://github.com/JPVenson/JPB.InhousePlayback

For Video related stuff i was doing, the most important classes are as follwing: VideoExComponent: https://github.com/JPVenson/JPB.InhousePlayback/tree/master/JPB.InhousePlayback/Client/Components/VideoEx Mostly just copy paste for pushing the repo without having the changes on the Blazored.Video yet VideoEx: https://github.com/JPVenson/JPB.InhousePlayback/blob/master/JPB.InhousePlayback/Client/wwwroot/scripts/videoEx.js Js code for my custom Video overlay controls UI (containing also the js part for the VideoComponentEx)

chrislangston commented 3 years ago

@SQL-MisterMagoo I hope you're doing well. Any chance of getting these code changes merged in so we can pull the Nuget library instead of manually bringing in the various components?

JPVenson commented 3 years ago

Yea same here. I will reiterrate over your mentions and make as much changes as you asked for, but I just recently suffered some hardware loss (GPU Waterblock literally Burned today) i dont know when I again will have a working pc for the changes to be made.

aradalvand commented 3 years ago

@JPVenson Hey, hope you're doing great. This is a great PR, nice job! I stumbled upon this repo yesterday and I immediately thought these properties and methods were very much needed. I even posted an issue asking for them! I didn't know this PR existed. Is there any chance you could sort out the changes that @SQL-MisterMagoo talked about in the coming days so we can have these functionalities soon? That'd be very much appreciated.

chrislangston commented 3 years ago

@JPVenson Hey, hope you're doing great. This is a great PR, nice job! I stumbled upon this repo yesterday and I immediately thought these properties and methods were very much needed. I even posted an issue asking for them! I didn't know this PR existed. Is there any chance you could sort out the changes that @SQL-MisterMagoo talked about in the coming days so we can have these functionalities soon? That'd be very much appreciated.

Hi @AradAral This is going to turn out to be a very important library for the Blazor eco-system. What I did was to pull the PR locally and I am using it as it to fit my needed in the meantime. Once the changes come in I'll replace with the latest and great code. However, this allows me to reload new videos using familiar C# method names which makes it amazing :-). The actual project that JP shared actual demonstrates a very advanced usage of this library.

JPVenson commented 3 years ago

@AradAral Without promises, maybe Tuesday next week.

JPVenson commented 3 years ago

OK a bit of explaining required:

Apart from that, I added comments for all properties according to: https://www.w3schools.com/tags/ref_av_dom.asp

aradalvand commented 3 years ago

@JPVenson Good job. Thanks, man.

JPVenson commented 3 years ago

@SQL-MisterMagoo hey has been a while. Any progress here?

SQL-MisterMagoo commented 3 years ago

@SQL-MisterMagoo hey has been a while. Any progress here?

Hi, yeah, sorry personal reasons, but I've been working on it again today and come across something I hadn't tested yet and don't know if I am doing something wrong....

I was trying to set the PlaybackRate, but cannot find a syntax that works - I've never seen a property defined as a Task and don't know how to use it to set a value - can you help?

JPVenson commented 3 years ago

@SQL-MisterMagoo Yea no hurry just wanted to know if you are still aware of it :-).

in my last pull request the property was of type double:


/// <summary>
///     Sets or returns the speed of the audio/video playback 
/// <example>
/// <para>
///     1.0 is normal speed,
///     0.5 is half speed (slower),
///     2.0 is double speed (faster),
///     -1.0 is backwards; normal speed,
///     -0.5 is backwards; half speed,
/// </para>
/// </example>
/// </summary>
public double PlaybackRate 
{
    get { return GetValue<double>(); }
    set { SetValue(value); }
}

What do you mean with a property of type Task?

SQL-MisterMagoo commented 3 years ago

What do you mean with a property of type Task?

Hmm, ok so I have to look back and see what happened - thanks

JPVenson commented 3 years ago

@SQL-MisterMagoo I reviewed your PR and with https://github.com/Blazored/Video/pull/8/commits/846cc3026b44fb0c61155c840e8179b6714b432f you changed all the types to be of Task<>. Mine did not but return the direct type.

SQL-MisterMagoo commented 3 years ago

Yeah, I just saw that myself - I think you can see why I took a break! I'll fix it 😱😱

SQL-MisterMagoo commented 2 years ago

I am finally able to look at this again - I have updated the tests to work with the new code and am in the process of updating the samples to use some of the new methods/properties.

Hitting a few snags but hope to have it sorted out tomorrow.

SaifAqqad commented 2 years ago

Any updates on this?

alelom commented 1 year ago

any update?

SQL-MisterMagoo commented 1 year ago

Hey all - really sorry for the loooong delay - It's been a rough couple of years and I just haven't had the time to do anything, but I am actively looking to merge this in now. Hopefully not too long.

JPVenson commented 1 year ago

@SQL-MisterMagoo No worries we understand. I hope everything now works out for you! But if you need more help i can offer to help you out with the video repro.

chrislangston commented 1 year ago

@SQL-MisterMagoo Gl

@SQL-MisterMagoo No worries we understand. I hope everything now works out for you! But if you need more help i can offer to help you out with the video repro.

@SQL-MisterMagoo We all understand the day job commitments. I still greatly appreciate you and @JPVenson creating / enhancing this library. I've been using it non-stop without issues since Dec 2020 which is a strong testament to your creativity and contributions to the community.

If I can be of assistance let me know.