ビデオを再生しようビデオフレーム内

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をページのルートパネルに設定し、2つの行に分割します。最初の行にMediaPlayerElementを置き、2番目の行に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> 

そして私は、GridViewの項目がクリックされたときにmediaPlayerElementが自動的に再生されるデータ・バインディング

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

のためのモデルを作ります。

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