Added Common Methods and Properties #4

JPVenson · 2020-11-30T14:11:59Z

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 · 2020-12-02T23:30:29Z

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

chrislangston · 2020-12-03T16:18:58Z

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

When each video ends, play the next one in the list.
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 · 2020-12-03T17:27:49Z

@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

Use Jquery if present for event listener

chrislangston · 2020-12-03T20:03:45Z

@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 · 2020-12-03T20:55:21Z

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 · 2020-12-03T21:21:29Z

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 · 2020-12-03T21:29:22Z

@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 · 2020-12-07T22:16:24Z

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

SQL-MisterMagoo

Hey, thanks for the PR - I'd really like to get this merged in, but I have concerns about the number of properties with setters that either will do nothing or could benefit from some validation.

I didn't flag them all up as it's late and I think a pattern is emerging that should be easy enough to follow.

One of the reasons why I haven't added any of this myself is the concern about getting it right and preventing support issues, so I'd really like it if you could remove properties and/or setters where they don't make sense or are not implemented yet and create some samples of the API usage.

I'd understand if you don't want to/can't do that - for the same reasons I'd hope you understand my reasons for wanting them.

src/Blazored.Video/BlazoredVideo.razor.cs

src/Blazored.Video/BlazoredVideo.razor.Properties.cs

SQL-MisterMagoo · 2020-12-08T00:12:20Z

src/Blazored.Video/BlazoredVideo.razor.Properties.cs

+			set { SetValue(value); }
+		}
+
+		public object AudioTracks


I'm not sure it is wise to add properties that will just throw an exception - I think it would be a better experience to just no provide these - was there a reason in your mind for having them ?

I thought about that like you in the first place but if the properties are there, and some day they are supported you could use them without recompiling the lib.
( object because of lazyness )

src/Blazored.Video/BlazoredVideo.razor.Properties.cs

JPVenson · 2020-12-08T01:15:10Z

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 · 2020-12-11T21:56:17Z

@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 · 2020-12-11T22:33:48Z

@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 · 2020-12-12T02:54:50Z

@AradAral Without promises, maybe Tuesday next week.

Made GetValue and SetValue protected Fixed setters present on readonly properties

…avior Changed name of js object to be BlazoredVideo to avoid possible nameing conflics Enabled package generation on build

JPVenson · 2020-12-12T15:33:35Z

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 · 2020-12-12T15:58:44Z

@JPVenson Good job. Thanks, man.

SQL-MisterMagoo

Thanks very much for all your efforts, please don't feel the need to alter your PR based on the latest review, as I'm going to pull this down and test it out, and add some samples. I'll take care of any final tweaks while I do that.

There are some failing tests that I need to look at as well.

Hopefully we can get all this merged in fairly soon.

SQL-MisterMagoo · 2020-12-23T14:41:25Z

src/Blazored.Video/Blazored.Video.csproj

@@ -25,10 +25,13 @@
 		<PublishRepositoryUrl>true</PublishRepositoryUrl>
 		<EmbedUntrackedSources>true</EmbedUntrackedSources>
 		<PackageReleaseNotes>Initial Release</PackageReleaseNotes>
+		<Version>1.1.0</Version>


Versioning happens in the github workflow when we release, this is not needed/wanted in the source

SQL-MisterMagoo · 2020-12-23T14:41:59Z

src/Blazored.Video/Blazored.Video.csproj

@@ -25,10 +25,13 @@
 		<PublishRepositoryUrl>true</PublishRepositoryUrl>
 		<EmbedUntrackedSources>true</EmbedUntrackedSources>
 		<PackageReleaseNotes>Initial Release</PackageReleaseNotes>
+		<Version>1.1.0</Version>
+		<GeneratePackageOnBuild>true</GeneratePackageOnBuild>


Packaging happens in the github workflow, this is not needed

SQL-MisterMagoo · 2020-12-23T14:55:26Z

src/Blazored.Video/BlazoredVideo.razor

@@ -1,80 +1,22 @@
 @*


As this code is required for the component to work, the default result of this is more work for the end developer and a breaking change for existing projects.

While I can see that some devs might want the JS separate, I think it would be best if this was controlled by an optional parameter on the component, leaving the default behaviour as it is now, but enabling those devs who want to control the JS externally with that ability.

I would want something like this in BlazoredVideo.razor.cs

[Parameter] public bool UseExternalJavaScript { get; set; } = false;

and then in this file,

@if (!Configured && !UseExternalJavaScript) { ... }

It would then also be of benefit to raise a decent error if the developer has not included the JS required for this to run.

JPVenson · 2021-02-12T10:22:53Z

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

SQL-MisterMagoo · 2021-02-21T16:04:49Z

@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 · 2021-02-21T16:09:14Z

@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 · 2021-02-21T16:13:00Z

What do you mean with a property of type Task?

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

JPVenson · 2021-02-21T16:13:52Z

@SQL-MisterMagoo I reviewed your PR and with 846cc30 you changed all the types to be of Task<>. Mine did not but return the direct type.

SQL-MisterMagoo · 2021-02-21T16:16:42Z

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

SQL-MisterMagoo · 2021-12-14T03:10:54Z

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 · 2022-09-04T12:47:15Z

Any updates on this?

alelom · 2022-12-12T09:40:26Z

any update?

SQL-MisterMagoo · 2022-12-24T00:00:17Z

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 · 2022-12-24T10:33:09Z

@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 · 2022-12-24T13:58:22Z

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

Added Common Methods and Properties

6d4877a

JPVenson mentioned this pull request Nov 30, 2020

Set the timings from which the Video has to start #1

Closed

Jean-Pierre Bachmann added 3 commits December 3, 2020 18:37

Added Check in js methods for disposed element

022d1e7

Use Jquery if present for event listener

Changed method accessability for better extentability

2eb2a22

Added Missing Poster property

6fe092c

SQL-MisterMagoo requested changes Dec 8, 2020

View reviewed changes

Jean-Pierre Bachmann added 7 commits December 12, 2020 13:55

Added Method documentation

2a9dd6a

Made GetValue and SetValue protected Fixed setters present on readonly properties

Removed non-dynamic setters

1129cad

Fixed seekable not been readonly

19b6145

Moved blazoredVideo to be complient with standard razor component beh…

949031e

…avior Changed name of js object to be BlazoredVideo to avoid possible nameing conflics Enabled package generation on build

Changed Blazored js object name reference in method calls

a8199b5

Changed Blazored js object call in properties

8b64288

Added TextTracks converter

392552c

JPVenson requested a review from SQL-MisterMagoo December 12, 2020 15:41

SQL-MisterMagoo reviewed Dec 23, 2020

View reviewed changes

SQL-MisterMagoo mentioned this pull request Feb 21, 2021

Feature methods props #8

Closed

JPVenson mentioned this pull request Apr 10, 2021

Setting up volume #9

Closed

JPVenson mentioned this pull request Sep 4, 2022

Control Video From code #17

Closed

SQL-MisterMagoo mentioned this pull request Dec 28, 2022

Can we control Video from code? #11

Closed

SQL-MisterMagoo merged commit 27c1504 into Blazored:main Jan 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Common Methods and Properties #4

Added Common Methods and Properties #4

JPVenson commented Nov 30, 2020

SQL-MisterMagoo commented Dec 2, 2020

chrislangston commented Dec 3, 2020

JPVenson commented Dec 3, 2020 •

edited

Loading

chrislangston commented Dec 3, 2020

JPVenson commented Dec 3, 2020

chrislangston commented Dec 3, 2020

JPVenson commented Dec 3, 2020

chrislangston commented Dec 7, 2020

SQL-MisterMagoo left a comment

SQL-MisterMagoo Dec 8, 2020

JPVenson Dec 8, 2020

JPVenson commented Dec 8, 2020

aradalvand commented Dec 11, 2020 •

edited

Loading

chrislangston commented Dec 11, 2020

JPVenson commented Dec 12, 2020

JPVenson commented Dec 12, 2020 •

edited

Loading

aradalvand commented Dec 12, 2020 •

edited

Loading

SQL-MisterMagoo left a comment

SQL-MisterMagoo Dec 23, 2020

SQL-MisterMagoo Dec 23, 2020

SQL-MisterMagoo Dec 23, 2020

JPVenson commented Feb 12, 2021

SQL-MisterMagoo commented Feb 21, 2021

JPVenson commented Feb 21, 2021

SQL-MisterMagoo commented Feb 21, 2021

JPVenson commented Feb 21, 2021

SQL-MisterMagoo commented Feb 21, 2021

SQL-MisterMagoo commented Dec 14, 2021

SaifAqqad commented Sep 4, 2022

alelom commented Dec 12, 2022

SQL-MisterMagoo commented Dec 24, 2022

JPVenson commented Dec 24, 2022

chrislangston commented Dec 24, 2022

Added Common Methods and Properties #4

Added Common Methods and Properties #4

Conversation

JPVenson commented Nov 30, 2020

SQL-MisterMagoo commented Dec 2, 2020

chrislangston commented Dec 3, 2020

JPVenson commented Dec 3, 2020 • edited Loading

chrislangston commented Dec 3, 2020

JPVenson commented Dec 3, 2020

chrislangston commented Dec 3, 2020

JPVenson commented Dec 3, 2020

chrislangston commented Dec 7, 2020

SQL-MisterMagoo left a comment

Choose a reason for hiding this comment

SQL-MisterMagoo Dec 8, 2020

Choose a reason for hiding this comment

JPVenson Dec 8, 2020

Choose a reason for hiding this comment

JPVenson commented Dec 8, 2020

aradalvand commented Dec 11, 2020 • edited Loading

chrislangston commented Dec 11, 2020

JPVenson commented Dec 12, 2020

JPVenson commented Dec 12, 2020 • edited Loading

aradalvand commented Dec 12, 2020 • edited Loading

SQL-MisterMagoo left a comment

Choose a reason for hiding this comment

SQL-MisterMagoo Dec 23, 2020

Choose a reason for hiding this comment

SQL-MisterMagoo Dec 23, 2020

Choose a reason for hiding this comment

SQL-MisterMagoo Dec 23, 2020

Choose a reason for hiding this comment

JPVenson commented Feb 12, 2021

SQL-MisterMagoo commented Feb 21, 2021

JPVenson commented Feb 21, 2021

SQL-MisterMagoo commented Feb 21, 2021

JPVenson commented Feb 21, 2021

SQL-MisterMagoo commented Feb 21, 2021

SQL-MisterMagoo commented Dec 14, 2021

SaifAqqad commented Sep 4, 2022

alelom commented Dec 12, 2022

SQL-MisterMagoo commented Dec 24, 2022

JPVenson commented Dec 24, 2022

chrislangston commented Dec 24, 2022

JPVenson commented Dec 3, 2020 •

edited

Loading

aradalvand commented Dec 11, 2020 •

edited

Loading

JPVenson commented Dec 12, 2020 •

edited

Loading

aradalvand commented Dec 12, 2020 •

edited

Loading