본문 바로가기
fuse

Video

by 루에 2016. 1. 6.
반응형

Video

To display a video:

<Video File="fuse_video.mp4" />

 File and Url 을 이용해 파일을 재생하거나 스트리밍 가능. 비디오는 이미지와 비슷하며,  StretchMode, StretchDirection and ContentAlignment 와 같은 방법을 적용할 수 있다.

Video properties

Video comes with a set of properties that can be used to configure it or control it, in addition to the properties shared withImage:

  • Volume: range from 0.0 to 1.0, default is 1.0
  • Duration: the duration of the video in seconds
  • Position: the current position of the video in seconds
  • IsLooping: a bool specifying if the video should loop or not, default is false

Useful triggers that can be used with Video

<Video>
    <WhilePlaying />    <!-- Active while the video is playing -->
    <WhilePaused />     <!-- Active while the video is paused -->
    <WhileCompleted />  <!-- Active while the video is done playing -->
    <WhileLoading />    <!-- Active while the video is loading -->
    <WhileFailed />     <!-- Active if the video failed to load or an error occured -->
</Video>

Useful actions that can be used to control Video

Fuse comes with a set of actions that can be used to control video playback. They all have a common Target property that specifies which Video element they control.

<Pause />      <!-- Pauses playback, leaving the current position as-is -->
<Stop />       <!-- Stops playback and returns to the beginning of the video -->
<Resume />     <!-- Resumes playback from the current position -->

Supported formats

각 플랫폼에서 지원하는 포맷들

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


반응형

댓글