Implementing a complete Video Control

How-to Discussions
1

Hi, guys.

This is probably a dumb question, but I was playing with this example (https://www.fusetools.com/learn/fuse#video) but I ended up stuck to implement two things:

1 - I’d like to control the timeline of the video with some kind of slider control. Is it possible with Fuse?

2 - I’d like to add just one button that plays and pauses the video, so the text will change depending on user’s action. According with the example above, I can only use the Resume or Pause tag once.

Oh, and the bonus question: The progress bar seems to expand from the center, rather than from left to right (as progress bars usually behaves). Is there a way to change that?

I will appreciate any help with that!!

Thanks!

2

That link you referenced shows an example:

<App Theme="Basic">
    <DockPanel>
        <Video ux:Name="video" Dock="Fill" File="fuse_video.mp4" IsLooping="true" StretchMode="UniformToFill">
            <ProgressAnimation>
                <Change progressBar.Width="100" />
            </ProgressAnimation>
        </Video>
        <Rectangle ux:Name="progressBar" Dock="Bottom" Fill="#f00" Width="0%" Height="10" />
        <Grid Dock="Bottom" ColumnCount="2" RowCount="1">
            <Button Text="Play">
                <Clicked>
                    <Resume Target="video" />
                </Clicked>
            </Button>
            <Button>
                <Clicked>
                    <Pause Target="video" />
                </Clicked>
            </Button>
        </Grid>
    </DockPanel>
</App>
3

No, it doesn’t :frowning:

4

What doesn’t? The link, it does under “Video Example” that’s where I copied that code

5

Don’t get me wrong: You clearly wants to help and I really appreciate that. But I’m not a experienced developer, I’m primarily a designer. The example above has two buttons, instead of just one for play and pause the video; There’s not a way to control the timeline with a slider control (if there’s a way to do that, I don’t know how) and the progress bar expands from the center, rather than from left to right.

if you read my initial thread with caution, you will see that the example above doesn’t answer those questions.

Thanks again for your support.

6

Oh sorry didn’t show a full example, but that example shows how you would pause play. Depending on how much you learned of Fuse, you should be able to figure it out. I was basically showing you that the Pause and Play elements exist etc. Now for a full example I’ll leave that to someone else right now. I’ll try to reply with a full example when I get the chance, because I’ll have to run tests and debug for that.

7

Thanks for your attention, my friend. Hope someone can help me with that.

8

Have a look at this example:

<App>
    <ClientPanel>
        <DockPanel>
            <Video ux:Name="_video" AutoPlay="false" Progress="{Property _slider.Value}" Margin="20" Dock="Fill" Url="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" >                        
                <WhilePlaying>
                    <Change _canPause.Value="true" />
                    <Change _canPlay.Value="false" />
                </WhilePlaying>
            </Video>
            <StackPanel Dock="Bottom" Margin="2">
                <Slider ux:Name="_slider" Minimum="0" Maximum="1" />
                <Panel>
                    <Rectangle Padding="10" CornerRadius="5">
                        <Text Value="Play" ux:Name="_text" TextAlignment="Center" />
                        <WhileTrue ux:Name="_canPause" Value="false">
                            <Set _text.Value="Pause" />
                            <Clicked>
                                <Pause Target="_video" />
                            </Clicked>
                        </WhileTrue>
                        <WhileTrue ux:Name="_canPlay" Value="true">
                            <Set _text.Value="Play" />
                            <Clicked>
                                <Resume Target="_video" />
                            </Clicked>
                        </WhileTrue>
                        <SolidColor Color="#0cf" />
                        <Stroke><SolidColor Color="#000" /></Stroke>
                    </Rectangle>
                </Panel>
            </StackPanel>
        </DockPanel>
    </ClientPanel>
</App>
9

Fantastic! Exactly what I was looking for! Thanks!

A lot of value gained from just few lines of code. Fuse is indeed amazing…