試圖播放視頻裏面的視頻幀

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