How do you programmatically set the source information?

[chrislangston]

Thanks so much for creating this awesome library!

I need to create a page that plays a main video with a list of additional videos to be played when in sequence. I will listen to the OnEnded Action and then check my list of videos to play and set the Source to be the next video in the list.

Do you have any documentation on how I can set the source to the next video in my list?

Thanks,

Chris

[SQL-MisterMagoo]

I would just use a variable for the source, then simply change it in the event handler

<BlazoredVideo EndedEvent="OnEnded"
                VideoEventOptions="options"
                controls="controls">
    <source src=@CurrentSource type="video/mp4" />
</BlazoredVideo>

@code {
  void OnEnded(VideoState state)
  {
    CurrentSource = GetNextVideoSource();
  }
}

If you want to play the video you would need to use a JS Invoke to start it.

[chrislangston]

I would just use a variable for the source, then simply change it in the event handler

<BlazoredVideo EndedEvent="OnEnded"
                VideoEventOptions="options"
                controls="controls">
    <source src=@CurrentSource type="video/mp4" />
</BlazoredVideo>

@code {
  void OnEnded(VideoState state)
  {
    CurrentSource = GetNextVideoSource();
  }
}

If you want to play the video you would need to use a JS Invoke to start it.

@SQL-MisterMagoo Thanks for the tip on setting the source dynamically. I have that all working and I can see in the DOM where the is getting changed.

Now I am unsure how to perform the javascript invoke that you mentioned where you suggest "you would need to use a JS Invoke to start it"?

I can see in the Chrome Developer tools the following "Event Listeners" (canplay, change, ended, play) with screenshot attached. I would think I need to invoke the "play" javascript function.

Do you have a code sample of making the correct JavaScript invocation?

Thanks,

Chris

[SQL-MisterMagoo]

You could try using the autoplay="autoplay" attribute on the component (standard html5 video attibutes are all valid)

Otherwise, there is an update coming with C# access to properties and methods of the video element

[chrislangston]

Thanks for taking the time out of your busy day @SQL-MisterMagoo and answering my questions. My Blazor WASM application went live in early January.

[rclancy]

User Blazor Server .Net 6.0, I cannot get changing src value to work. The control maintains the original source even though the variable value has changed. I've also tried the ReloadControl method with the same unsuccessful result. I've found an ugly workaround: If I change the value of variable, then hide the control, reload the control, show the control, then the video source is changed. If I leave out any of these steps after changing the variable value, it does not work.