显示视频使用媒体元素的Windows 8.1的通用应用程序播放进度 [英] Show Video Play Progress using Media Element Windows 8.1 Universal app

问题描述

我要显示视频的进度播放时，但我不明白的媒体元素上的任何事件在那里我会得到发挥像下载进度视频的进步和缓冲进度。是否有任何其他的方式来实现呢？ ？或者一些其它的工具或东西。

 < MediaElement的点¯x ：NAME =播放器自动播放=真
 MediaEnded =player_MediaEnded拉伸=统一
 DownloadProgressChanged =player_DownloadProgressChanged
 BufferingProgressChanged =player_BufferingProgressChanged
 CurrentStateChanged = player_CurrentStateChanged/> 
 
< FlyoutPresenter ScrollViewer.VerticalScrollMode =已禁用
 ScrollViewer.Horizo​​ntalScrollMode =已禁用X：NAME =playerControls
保证金=0,0,0,0 HEIGHT =150背景=透明VerticalAlignment =底> 
<网格和GT; 
< Grid.RowDefinitions> 
< RowDefinition高度=自动/> 
< RowDefinition高度=自动/> 
< RowDefinition高度=*/> 
< /Grid.RowDefinitions> 
 
< TextBlock的X：名称=SONGTITLEGrid.Row =0前景=白TextAlignment =中心
保证金=10,0,10,5 VerticalAlignment =顶级的Horizo​​ntalAlignment =拉伸/> 
<进度Grid.Row =1×：NAME =进度背景=白
 IsIndeterminate =真最大=1HEIGHT =2
 VerticalAlignment =底保证金=10,0,10,20/> 
 
<电网Grid.Row =2> 
< Grid.ColumnDefinitions> 
< ColumnDefinition WIDTH =*/> 
< ColumnDefinition WIDTH =*/> 
< ColumnDefinition WIDTH =*/> 
< /Grid.ColumnDefinitions> 
 
<按钮X：NAME =backword风格={StaticResource的的ButtonStyle}点击=backword_Click保证金=0,0,0,0前景=红
了borderThickness =0Grid.Column =0的Horizo​​ntalAlignment =右的背景=透明> 
<图像拉伸=无源=MS-APPX：///Assets/backword.png/> 
< /按钮> 
<按钮X：NAME =playPause风格={StaticResource的的ButtonStyle}点击=playPause_Click保证金=0,0,0,0前景=红
了borderThickness = 0Grid.Column =1的Horizo​​ntalAlignment =中心背景=透明> 
<图像X：NAME =playPauseButton拉伸=无源=MS-APPX：///Assets/Play.png/> 
< /按钮> 
<按钮X：名称=前进风格={StaticResource的的ButtonStyle}点击=forward_Click保证金=0,0,0,0前景=红
了borderThickness = 0Grid.Column =2的Horizo​​ntalAlignment =左的背景=透明> 
<图像拉伸=无源=MS-APPX：///Assets/Forward.png/> 
< /按钮> 
< /网格和GT; 
< /网格和GT; 
< / FlyoutPresenter> 
 
< FlyoutPresenter ScrollViewer.VerticalScrollMode =禁用了borderThickness =0
 ScrollViewer.Horizo​​ntalScrollBarVisibility =隐藏
 ScrollViewer.VerticalScrollBarVisibility =隐藏的Horizo​​ntalAlignment =弹力 
 ScrollViewer.Horizo​​ntalScrollMode =已禁用X：NAME =topbarControls
保证金=0 -30,0,0HEIGHT =100背景=透明VerticalAlignment =评出的> ; 
<网格和GT; 
< Grid.ColumnDefinitions> 
< ColumnDefinition WIDTH =*/> 
< ColumnDefinition WIDTH =*/> 
< /Grid.ColumnDefinitions> 
 
<按钮X：NAME =后面的风格={StaticResource的的ButtonStyle}点击=back_Click保证金=0,0,0,0前景=红
了borderThickness =0Grid.Column =0的Horizo​​ntalAlignment =左的背景=透明> 
<图像拉伸=无源=MS-APPX：///Assets/Back.png/> 
< /按钮> 
<按钮X：NAME =分享风格={StaticResource的的ButtonStyle}点击=share_Click保证金=0,0,0,0前景=红
了borderThickness = 0Grid.Column =1的Horizo​​ntalAlignment =右的背景=透明> 
<图像拉伸=无源=MS-APPX：///Assets/Share2.png/> 
< /按钮> 
< /网格和GT; 
< / FlyoutPresenter> 
  

上面我已经给定的XAML做参考。

解决方案

一个简单的解决方案是通过的绑定的做到这一点。很简单的例子可以是这样的：

首先，我们将需要转换器来转换的时间跨度和持续时间到双的（如 ProgressBas的的值，使用此类型）：

<预类=郎-CS prettyprint-覆盖> 公共类TimeSpanToDouble：的IValueConverter
{
公共对象转换（对象的值，类型TARGETTYPE，对象参数，字符串语言）
{回报（价值== NULL）？ 0：（（时间跨度）值）.TotalSeconds; }

公共对象ConvertBack（对象的值，类型TARGETTYPE，对象参数，字符串语言）
{抛出新NotImplementedException（）; }
}

公共类DurationToDouble：的IValueConverter
{
公共对象转换（对象的值，类型TARGETTYPE，对象参数，字符串语言）
{返回（价值== NULL）？ 0：（（持续时间）值）.TimeSpan.TotalSeconds; }

公共对象ConvertBack（对象的值，类型TARGETTYPE，对象参数，字符串语言）
{抛出新NotImplementedException（）; }
}


一旦我们拥有了它，剩下的就是在XAML简单 - 只要绑定进度的的值的的MediaElement 的那些，并开始播放：

<预类=郎咸平的XML prettyprint-覆盖> <！ - 在资源转换器 - >
< Page.Resources>
<局部：TimeSpanToDouble X：键=TimeSpanToDouble/>
<局部：DurationToDouble X：键=DurationToDouble/>
< /Page.Resources>

<！ - 的MediaElement和进度 - >
< MediaElement的名称=玛雅WIDTH =200HEIGHT =200Grid.Row =2/>
<进度的Horizo​​ntalAlignment =拉伸Grid.Row =3最小=0
值={绑定的ElementName =玛雅，路径=位置，转换器= {StaticResource的TimeSpanToDouble}}
最大={绑定的ElementName =玛雅，路径= NaturalDuration，转换器= {StaticResource的DurationToDouble}}/>


当然，这将需要更多的改进，但应该可以帮助您开始。

另请注意，您可以使用的滑块的代替的进度的和定义的双向绑定的 - 在这种情况下，你可以，不仅要跟踪进度，而且要跳到视频的特定位置。

i want to show Progress of Video while it is playing but i dont get any event on media element where i will get play progress of video like download progress and buffer progress. Is there any other way to achieve it? or some other tool or something?

<MediaElement x:Name="player" AutoPlay="True"
              MediaEnded="player_MediaEnded" Stretch="Uniform"                    
              DownloadProgressChanged="player_DownloadProgressChanged"
              BufferingProgressChanged="player_BufferingProgressChanged" 
              CurrentStateChanged="player_CurrentStateChanged"/>

<FlyoutPresenter ScrollViewer.VerticalScrollMode="Disabled"
                 ScrollViewer.HorizontalScrollMode="Disabled" x:Name="playerControls"
                 Margin="0,0,0,0" Height="150" Background="Transparent" VerticalAlignment="Bottom">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock x:Name="songTitle" Grid.Row="0" Foreground="White" TextAlignment="Center"
                   Margin="10,0,10,5" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
       <ProgressBar Grid.Row="1" x:Name="progressBar" Background="White"
                    IsIndeterminate="True" Maximum="1" Height="2" 
                    VerticalAlignment="Bottom" Margin="10,0,10,20"/>

        <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

            <Button x:Name="backword" Style="{StaticResource ButtonStyle}" Click="backword_Click" Margin="0,0,0,0"  Foreground="Red"
                BorderThickness="0" Grid.Column="0" HorizontalAlignment="Right" Background="Transparent">
                <Image Stretch="None" Source="ms-appx:///Assets/backword.png"/>
            </Button>
            <Button x:Name="playPause" Style="{StaticResource ButtonStyle}" Click="playPause_Click" Margin="0,0,0,0"  Foreground="Red"
                BorderThickness="0" Grid.Column="1" HorizontalAlignment="Center" Background="Transparent">
                 <Image x:Name="playPauseButton" Stretch="None" Source="ms-appx:///Assets/Play.png"/>
            </Button>
            <Button x:Name="forward" Style="{StaticResource ButtonStyle}" Click="forward_Click" Margin="0,0,0,0" Foreground="Red"
                BorderThickness="0" Grid.Column="2" HorizontalAlignment="Left" Background="Transparent">
                 <Image Stretch="None" Source="ms-appx:///Assets/Forward.png"/>
            </Button>
        </Grid>
    </Grid>
</FlyoutPresenter>

<FlyoutPresenter ScrollViewer.VerticalScrollMode="Disabled" BorderThickness="0" 
                 ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                 ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch"
                 ScrollViewer.HorizontalScrollMode="Disabled" x:Name="topbarControls"
                 Margin="0,-30,0,0" Height="100" Background="Transparent" VerticalAlignment="Top">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

               <Button x:Name="back" Style="{StaticResource ButtonStyle}" Click="back_Click" Margin="0,0,0,0"  Foreground="Red"
                BorderThickness="0" Grid.Column="0" HorizontalAlignment="Left" Background="Transparent">
                 <Image  Stretch="None" Source="ms-appx:///Assets/Back.png"/>
            </Button>
            <Button x:Name="share" Style="{StaticResource ButtonStyle}" Click="share_Click" Margin="0,0,0,0" Foreground="Red"
                BorderThickness="0" Grid.Column="1" HorizontalAlignment="Right" Background="Transparent">
                 <Image Stretch="None" Source="ms-appx:///Assets/Share2.png"/>
             </Button>
    </Grid>
</FlyoutPresenter>

above i have given my xaml for refrence.

解决方案

One simple solution is to do it by Binding. The very simple example can look like this:

First we will need converters to convert TimeSpan and Duration to double (as ProgressBas's values use this type):

public class TimeSpanToDouble : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    { return (value == null) ? 0 : ((TimeSpan)value).TotalSeconds; }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    { throw new NotImplementedException(); }
}

public class DurationToDouble : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    { return (value == null) ? 0 : ((Duration)value).TimeSpan.TotalSeconds; }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    { throw new NotImplementedException(); }
}

Once we have it, the rest is simple in xaml - just bind ProgressBar's values to MediaElement ones and start playing:

<!--Converters in resources-->
<Page.Resources>
    <local:TimeSpanToDouble x:Key="TimeSpanToDouble"/>
    <local:DurationToDouble x:Key="DurationToDouble"/>
</Page.Resources>

<!--MediaElement and progressbar-->
<MediaElement Name="myMedia" Width="200" Height="200" Grid.Row="2"/>
<ProgressBar HorizontalAlignment="Stretch" Grid.Row="3" Minimum="0"
             Value="{Binding ElementName=myMedia, Path=Position, Converter={StaticResource TimeSpanToDouble}}"
             Maximum="{Binding ElementName=myMedia, Path=NaturalDuration, Converter={StaticResource DurationToDouble}}"/>

Of course this will need some more improvements, but should help you to start.

Note also that you can use Slider instead of ProgressBar and define TwoWay Binding - in this case you will be able, not only to track the progress, but also to jump to specific position of your video.

这篇关于显示视频使用媒体元素的Windows 8.1的通用应用程序播放进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！