Added Common Methods and Properties

[JPVenson]

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]

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

[chrislangston]

@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]

@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]

@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]

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]

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]

@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]

@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]

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]

@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]

@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]

@AradAral Without promises, maybe Tuesday next week.

[JPVenson]

OK a bit of explaining required:

• To be compliant with standards in Blazor Components, I changed the js component to not be loaded by default. Blazor components should be loaded by the invoker at his discretion with:

<script src="_content/Blazored.Video/blazoredVideo.js"></script>

• I added support for properties with TimeRanges
• I added also support for the property TextTracks but was not able to test this property as I dont have any video that seems to be supported
• Changed the name of the JS object as it was a bit too broad called "Blazored" for my taste to "BlazoredVideo"

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

[aradalvand]

@JPVenson Good job. Thanks, man.

[JPVenson]

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

[SQL-MisterMagoo]

@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<T> and don't know how to use it to set a value - can you help?

[JPVenson]

@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]

What do you mean with a property of type Task?

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

[JPVenson]

@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]

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

[SQL-MisterMagoo]

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]

Any updates on this?

[alelom]

any update?

[SQL-MisterMagoo]

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]

@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]

@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.