使用媒体元素显示视频播放进度 Windows 8.1 通用应用

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

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

Answer 2

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

首先，我们需要转换器将 TimeSpan 和 Duration 转换为 double（如 ProgressBas 的 值使用此类型):

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 -在这种情况下，您不仅可以跟踪进度，还可以跳转到视频的特定位置。

使用媒体元素显示视频播放进度 Windows 8.1 通用应用

Show Video Play Progress using Media Element Windows 8.1 Universal app

c#

video

mediaelement

windows-phone-8.1