试图播放视频里面的视频帧

Question

我试图播放视频里面的视频帧，该帧应该始终在主页的中心，另一个视频应该出现在底部。点击底部视频它将开始播放上面的视频帧。任何帮助，将不胜感激。

的XAML

<Grid> 
     <Grid.Background> 
      <ImageBrush ImageSource="Images\1280x800 final file.png"/> 
     </Grid.Background> 
     <RelativePanel x:Name="MainPanel" Grid.Row="0"> 
      <MediaElement x:Name="load" 
          Source="/Videos/load.mp4" 
          RelativePanel.AlignHorizontalCenterWithPanel="True"/> 

     </RelativePanel> 


    </Grid> 

参考图片

Answer 1

我已经创建了一个样本为你的描述。 我将Grid设置为页面的根面板，并将它分成两行。我在第一行放置了MediaPlayerElement，并在第二行放置了GridView。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
<Grid.RowDefinitions> 
    <RowDefinition Height="*" /> 
    <RowDefinition Height="*" /> 
</Grid.RowDefinitions> 
<Grid HorizontalAlignment="Center" VerticalAlignment="Center"> 
    <MediaPlayerElement 
     x:Name="mediaPlayerElement" 
     Height="150" 
     Margin="0,0,0,10" 
     IsItemClickEnabled="True" 
     HorizontalAlignment="Stretch" 
     AreTransportControlsEnabled="True" 
     AutoPlay="True" /> 
</Grid> 
<Grid Grid.Row="1"> 
    <GridView 
     x:Name="VideoGridView" 
     Margin="10,10,0,10" 
     HorizontalAlignment="Stretch" 
     IsItemClickEnabled="True" 
     ItemClick="VideoGridView_ItemClick" 
     ItemsSource="{x:Bind videoItems}"> 
     <GridView.ItemTemplate> 
      <DataTemplate x:DataType="data:VideoItem"> 
       <Grid 
        Width="100" 
        Height="150" 
        Background="LightGray"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="120" /> 
         <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <Image 
         Name="VideoProviewImage" 
         Grid.Row="0" 
         Source="{x:Bind imageSource}" 
         Stretch="UniformToFill" /> 
        <TextBlock 
         Name="VideoTitle" 
         Grid.Row="1" 
         Height="30" 
         Text="{x:Bind videoTitle}" 
         TextAlignment="Center" 
         TextWrapping="Wrap" /> 
       </Grid> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
    </GridView> 
</Grid> 

然后我做了一个模型数据结合

public class VideoItem 
{ 
    public string imageSource { get; set; } 
    public string videoUri { get; set; } 
    public string videoTitle { get; set; } 

} 
public static class VideoManager 
{ 
    public static ObservableCollection<VideoItem> getVideos() 
    { 
     var videoItems = new ObservableCollection<VideoItem>(); 
     videoItems.Add(new VideoItem() { imageSource = "/Assets/image.jpg", videoUri = "https://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-srt_swe.mkv", videoTitle = "First" }); 
     videoItems.Add(new VideoItem() { imageSource = "/Assets/image.jpg", videoUri = "https://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary.mp4", videoTitle = "Second" }); 
     videoItems.Add(new VideoItem() { imageSource = "/Assets/image.jpg", videoUri = "https://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/multivideo-with-captions.mkv", videoTitle = "Third" }); 
     videoItems.Add(new VideoItem() { imageSource = "/Assets/image.jpg", videoUri = "https://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/sintel_trailer-480p.mp4", videoTitle = "Fourth" }); 
     return videoItems; 
    } 
} 

点击GridView的项目时，mediaPlayerElement会自动播放。

private void VideoGridView_ItemClick(object sender, ItemClickEventArgs e) 
{ 
    var vedio = e.ClickedItem as VideoItem;   
    var item = new MediaPlaybackItem(MediaSource.CreateFromUri(new Uri(vedio.videoUri))); 
    mediaPlayerElement.Source = item; 
}