UWP中MediaElement显示图片报错，求解决方案（附代码）

问题原因 #

MediaElement组件核心设计用于播放音视频流，虽文档提及支持部分图片格式，但实际调用SetSource加载静态图片时，控件会将其当作视频流解析，进而抛出"Unsupported video type or invalid file path"错误。

解决方案 #

1. 本地区分显示（音视频+图片） #

如果需要在本地界面同时展示音视频和图片，需根据文件类型分别处理：

• 音视频文件继续用MediaElement播放
• 图片文件改用Image控件加载

修改后的代码示例：

private async void loadButton_Click(object sender, RoutedEventArgs e)
{
    FileOpenPicker filePicker = new FileOpenPicker();
    filePicker.FileTypeFilter.Add(".wmv");
    filePicker.FileTypeFilter.Add(".mp4");
    filePicker.FileTypeFilter.Add(".mp3");
    filePicker.FileTypeFilter.Add(".png");
    filePicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;

    StorageFile file = await filePicker.PickSingleFileAsync();
    if (file != null)
    {
        // 判断文件类型
        if (file.ContentType.StartsWith("image/"))
        {
            // 加载图片到Image控件（需在XAML中添加<Image x:Name="imageControl"/>）
            IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
            BitmapImage bitmap = new BitmapImage();
            await bitmap.SetSourceAsync(stream);
            imageControl.Source = bitmap;
            // 切换控件显示状态
            video.Visibility = Visibility.Collapsed;
            imageControl.Visibility = Visibility.Visible;
        }
        else
        {
            // 音视频继续用MediaElement播放
            IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
            video.SetSource(stream, file.ContentType);
            // 切换控件显示状态
            imageControl.Visibility = Visibility.Collapsed;
            video.Visibility = Visibility.Visible;
        }
    }
}

2. DLNA投屏图片（核心目标解决方案） #

若最终要实现DLNA投屏，MediaElement的投屏能力有限，建议改用MediaPlayer + MediaPlaybackItem组合，这是UWP官方推荐的媒体投屏方案，支持图片、音视频的统一投屏处理。

第一步：初始化MediaPlayer和MediaPlayerElement（替代MediaElement）

在XAML中替换原有的MediaElement：

<MediaPlayerElement x:Name="mediaPlayerElement" AutoPlay="True"/>

第二步：修改文件加载及投屏逻辑

private MediaPlayer _mediaPlayer;
private MediaPlaybackItem _currentPlaybackItem;

public MainPage()
{
    this.InitializeComponent();
    _mediaPlayer = new MediaPlayer();
    mediaPlayerElement.SetMediaPlayer(_mediaPlayer);
}

private async void loadButton_Click(object sender, RoutedEventArgs e)
{
    FileOpenPicker filePicker = new FileOpenPicker();
    filePicker.FileTypeFilter.Add(".wmv");
    filePicker.FileTypeFilter.Add(".mp4");
    filePicker.FileTypeFilter.Add(".mp3");
    filePicker.FileTypeFilter.Add(".png");
    filePicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;

    StorageFile file = await filePicker.PickSingleFileAsync();
    if (file != null)
    {
        // 创建MediaPlaybackItem，统一支持图片、音视频
        _currentPlaybackItem = await MediaPlaybackItem.CreateFromFileAsync(file);
        _mediaPlayer.Source = _currentPlaybackItem;
    }
}

// 投屏按钮点击事件（需添加投屏按钮<Button Content="投屏" Click="CastButton_Click"/>）
private async void CastButton_Click(object sender, RoutedEventArgs e)
{
    if (_currentPlaybackItem != null)
    {
        // 启动设备选择器并发起投屏
        var castingPicker = new MediaCastingPicker();
        var castingSession = await castingPicker.PickCastingDeviceAsync();
        if (castingSession != null)
        {
            await castingSession.StartCastingAsync(_mediaPlayer);
        }
    }
}

关键说明 #

• MediaPlaybackItem是UWP媒体框架的核心对象，统一封装了音视频、图片的媒体资源，完美适配DLNA投屏（MediaCastingSession）API。
• 若坚持使用原有的MediaElement，可通过将图片转换为循环播放的视频流实现投屏，但这种方式复杂度高，不推荐。

内容的提问来源于stack exchange，提问作者Tom Xue