Playback Controller [Feature Request]

[JPVenson]

Is your feature request related to a problem? Please describe. An build in playback queue. It would be handy if there was a build-in way to setup an autoplay queue.

Describe the solution you'd like I imagine a controller type that can be set directly from razor code to queue multiple video sources to play after each other. The usage would look like this:

<BlazoredVideo Play="OnPlay"
        class="w-100"
        style="max-width:800px;"
        controls="controls">
    <VideoQueue Delay="0" Repeat="No/Once/Loop">
        <VideoItem Source="videos/elephants.mp4" type="video/mp4" />
        <VideoItem>
             <VideoSource Source="videos/lions.mp4" type="video/mp4" />
             <VideoSource Source="videos/lions.avi" type="video/avi" />
        </VideoItem>
    </VideoQueue>
</BlazoredVideo>

When using the VideoQueue element instead of an <video /> element the VideoQueue queues the containing elements for playback. When using the Delay property it delays the playback of the next element by howmany millisecounds. The Repeat property is an Enum that will ether repeat one element when set to Once, does not repeat on No and begins from the start when it got to the last element on Loop.

In this proposal we need the VideoItem because we would need to be able to supply multiple versions of a source to provide best coverage of browser capabilities.

When allowing to define this in razor code, the user is also able to provide own dynamic lists with for example a @foreach loop like this:

<BlazoredVideo Play="OnPlay"
        class="w-100"
        style="max-width:800px;"
        controls="controls">
    <VideoQueue>
        @foreach(var source in MYSOURCES)
{
        <VideoItem Source="@source.Source" type="@source.MediaType" />
}
    </VideoQueue>
</BlazoredVideo>

Describe alternatives you've considered Implementing on its own is possible however i believe this would be a great addition to the code base as a feature.

Additional context Add any other context or screenshots about the feature request here.

[JPVenson]

@SQL-MisterMagoo Would you have a look? Just to discuss this feature before I would waste any time on the implementation.

[SQL-MisterMagoo]

I like the idea.

I would want to include the ability to just provide the VideoQueue as a data property as well - so the end developer doesn't have to iterate and render VideoItems if they are happy with the default behaviour.

<BlazoredVideo Play="OnPlay"
    QueueData=MYSOURCES
    class="w-100"
    style="max-width:800px;"
    controls="controls" />

[JPVenson]

I had a simular idea but to put it in the VideoQueue element as a simple setup like this:

<BlazoredVideo Play="OnPlay"
        class="w-100"
        style="max-width:800px;"
        controls="controls">
    <VideoQueue Delay="0" Repeat="No/Once/Loop" Queue="StringArray"/>
</BlazoredVideo>

As a quick usage but to make it 1. obvious that the queue is in use 2. As i plan to put most queue logic in the actual VideoQueue control would help with seperation of concerns and 3. Would not spark additional requirements that when the Queue property is used to additionally provide the Delay and Repeat funktionality . Otherwise some (actual) shower thoughts are to provide additional control mehtods such as:

ValueTask PlayNext()
ValueTask PlayPrevious()

On the VideoQueue control.

[JPVenson]

But mostly i want to keep things seperated. I plan to only add a CascadingValue to the BlazoredVideo control and put everything else into the VideoQueue control.

[SQL-MisterMagoo]

That's cool - as long as we have a "simple" option where we can say "Video player - play these" and it just does it 😄

[SQL-MisterMagoo]

One more thought - an option to stop auto-playing after a certain TimeSpan - in case someone falls asleep.

[JPVenson]

Just to clarify Backwards compatibility is still granted in my proposal.

<BlazoredVideo Play="OnPlay"
        class="w-100"
        style="max-width:800px;"
        controls="controls">
     <VideoQueue Delay="0" Repeat="No">
        <VideoItem Source="videos/elephants.mp4" type="video/mp4" />     
     </VideoQueue>
</BlazoredVideo>

and

<BlazoredVideo Play="OnPlay"
        class="w-100"
        style="max-width:800px;"
        controls="controls">
    <source src="videos/elephants.mp4" type="video/mp4" />
</BlazoredVideo>

are functionally the same and are both supported.

One more thought - an option to stop auto-playing after a certain TimeSpan - in case someone falls asleep.

Interesting idea indeed, I will keep that in mind and see if I come up with an intuitive way.

[JPVenson]

So I am done with the basic implementation. But the timeout gives me a bit of a headache. Thinking about that, we would need ether a timer or check on each video change if the user has interacted with the control (Mouse, Keyboard or Touch) and then do what? Just stopping the playback does not feel right for me. @SQL-MisterMagoo do you have an idea how to implement that?

[SQL-MisterMagoo]

I think timeout can wait... I don't have any thoughts that I would be happy with right now.