Question

我想在播放时显示视频的进展，但我没有在媒体元素上获得任何事件，我将获得视频的播放进度，如下载进度和缓冲进度。有没有其他方法可以实现它？或其他一些工具？

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

上面我给了我的xaml参考。

Answer 1

一个简单的解决方案是通过 Binding 来实现。这个非常简单的例子如下所示：

首先，我们需要转换器将 TimeSpan 和 Duration 转换为 double （作为 ProgressBas＆＃39; s 值使用此类型）：

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(); }
}

一旦我们拥有它，其余部分在xaml中很简单 - 只需将 ProgressBar的值绑定到 MediaElement 并开始播放：

<!--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}}"/>

当然这需要一些改进，但应该可以帮助你开始。

另请注意，您可以使用 Slider 而不是 ProgressBar 并定义 TwoWay Binding - 在这种情况下，您不仅可以使用跟踪进度，还可以跳转到视频的特定位置。

Answer 2

我建议使用播放器框架。用它来构建视频播放器更容易 https://playerframework.codeplex.com/

使用Media Element Windows 8.1 Universal app显示视频播放进度

2 个答案: