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

尝试在视频帧内播放视频

1 个答案: