Set the timings from which the Video has to start

[VenkateshSrini]

Is your feature request related to a problem? Please describe. I want to resume a video from specified time interval Describe the solution you'd like Is there a way we can set the video state such that the vide will play from a particular second

Describe alternatives you've considered Tried using the video.js but that did not work

[SQL-MisterMagoo]

Thanks for raising this, I think as a more general request there should be some way to interact with the video from code.

Until that is baked in, you can do it manually like this:

Add some JavaScript to your site:

window['VideoControl'] = {
    setProperty: function (id, name, value) {
        try {
            const el = document.getElementById(id);
            el[name] = value;
        } catch (e) {
            console.error(e)
        }
    }
}

Add a handler for the CanPlay event

<BlazoredVideo 
    CanPlayEvent="OnCanPlay"
    VideoEventOptions="options"
    id="video1"
    class="w-100"
    style="max-width:800px;"
    controls="controls">
  <source src="elephants.mp4" type="video/mp4" />
</BlazoredVideo>

and then in your handler you can call the JS code to set the currentTime property

async Task OnCanPlay(VideoState videoState)
{
  if (videoState.CurrentTime == 0)
  {
    await JS.InvokeVoidAsync("VideoControl.setProperty", "video1", "currentTime", 10);
  }
}

[VenkateshSrini]

Is there a time line by which this will be baked into control and available

[SQL-MisterMagoo]

No firm timeline, but not before the .net5 go live as there are features in that to help here.

[VenkateshSrini]

Thanks for raising this, I think as a more general request there should be some way to interact with the video from code.

Until that is baked in, you can do it manually like this:

Add some JavaScript to your site:

window['VideoControl'] = {
    setProperty: function (id, name, value) {
        try {
            const el = document.getElementById(id);
            el[name] = value;
        } catch (e) {
            console.error(e)
        }
    }
}

Add a handler for the CanPlay event

<BlazoredVideo 
    CanPlayEvent="OnCanPlay"
    VideoEventOptions="options"
    id="video1"
    class="w-100"
    style="max-width:800px;"
    controls="controls">
  <source src="elephants.mp4" type="video/mp4" />
</BlazoredVideo>

and then in your handler you can call the JS code to set the currentTime property

async Task OnCanPlay(VideoState videoState)
{
  if (videoState.CurrentTime == 0)
  {
    await JS.InvokeVoidAsync("VideoControl.setProperty", "video1", "currentTime", 10);
  }
}

The window['VideoControl'] is this the Id of the video tag What I see is the id is at present auto -generate. If that is the case how can I get hold of this id?

[SQL-MisterMagoo]

No, that is just a name - it can be anything - to identify the code in the browser - it is use in the JS Interop call at the end - so if you choose to name it something else, make sure to change it there as well.

The "id" of the video element in my example is hard-coded as "video1" by providing that in the markup.

[VenkateshSrini]

This is not working. Even though we set the time it is not getting reflected in the video control. The video control still shows only at zero second. Is the onCanPlay the current event or is there any other event that we need to see

[VenkateshSrini]

I observed the following things. If I provide the id tag then in GoogleChrome two id attributes are getting rendered one with GUID without - and the other is video1. So what I did is I used getElementsbyTagName("video"). But this all did t work. I tried other events like loadeddata also but that is also not working. I could see with help of alerts that either with tag name or with id, the java script retrieves the correct video tag and also sets the value but then it is not reflected in control

[VenkateshSrini]

At last I have resolved the issue. There three changes. The event on Blazored video event for setting time should be LoadedDataEvent. Then when invoking the async method we should do @(async(videoState)=>OnLoaded(videoState)). Then when trying to get the element in javascript we should use var ele = getElementsByTagName[0]. With these changes I git it working. If we put the code in CanPlayEventit is getting in infinite loop setting property.

[SQL-MisterMagoo]

Well that was a bit of a bad side-track - I had forgotten about this. You can specify a start time for html5 media URLs, like this:

t=10,20   # => results in the time interval [10,20)
t=,20     # => results in the time interval [0,20)
t=10      # => results in the time interval [10,end)

An example would be https://path.to/my.video#t=12

And, of course this is Blazor, so you can control that from your C# code.

[VenkateshSrini]

oh ok. That would have super easy but none the less I git the same working. It would be of immense help if you could add it read me

[JPVenson]

Added PR #4 to implement such features