[fuse x] Video 태그를 응용한 재생 페이지

날짜:
Video 태그와 포함 태그를 응용한 예제
- StackPanel을 응용하여 각 요소를 정렬
- Grid 를 응용하여 각 아이콘 정렬


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<App>
    <Panel>
        <StackPanel>
            <Panel Color="#FFFFFF" Height="500">
                <!-- video 파트 추가-->
                <Video File="sampleviedo.mp4" ux:Name="video">
                    <ProgressAnimation>
                        <Change Target="progress_bar.Width" Value="100" />
                    </ProgressAnimation>
                </Video>
            </Panel>
 
            <!--재생 길이 확인을 위한 Rectangle-->
            <Panel>
                <Rectangle ux:Name="progress_bar" Dock="Bottom" Fill="Red" Width="0%" Height="10" />
            </Panel>
 
            <!-- 그리드를 활용하여 정지, 재생, 일시정지 구현-->
            <!-- Stop, Play, Pause 는 video 연동 기능 -->
            <Panel>
                <Grid RowCount="1" ColumnCount="3">
                            <Image File="icon/stop.png">
                                <Clicked>
                                    <Stop Target="video" />
                                </Clicked>
                            </Image>
                                
                            <Image File="icon/play.png">
                                <Clicked>
                                    <Play Target="video" />
                                </Clicked>
                            </Image>
                
                            <Image File="icon/pause.png">
                                <Clicked>
                                    <Pause Target="video" />
                                </Clicked>            
                            </Image>
                
                        </Grid>
            </Panel>
        </StackPanel>
        
    </Panel>
</App>
cs

댓글

댓글 쓰기