如何在不损耗性能的前提下展示多段视频剪辑预览？

问题背景 #

你开发的视频剪辑控件中，通过为每个ClipModel实例创建MediaElement来展示预览帧，导致单个视频对应多个剪辑时重复加载视频文件，带来严重的性能损耗。ClipModel定义如下：

public class ClipModel
{
    public Uri Source { get; }
    public TimeSpan Start{ get; }
    public TimeSpan End { get; }
}

当前XAML实现使用多个MediaElement绑定视频路径和起始位置：

<ScrollViewer Grid.Row="3" Padding="0,20,0,0" Background="White" FocusVisualStyle="{x:Null}"
              HorizontalScrollBarVisibility="Visible">
    <ItemsControl x:Name="Clips">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type models:ClipModel}">
                <MediaElement Source="{Binding VideoPath}"
                          helpers:MediaElementHelper.Position="{Binding Start}"
                          ScrubbingEnabled="True"
                          LoadedBehavior="Pause"
                          Height="50"
                          Width="100"
                          Margin="5"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

优化方案 #

1. 用Image控件替代MediaElement展示单帧 #

MediaElement是为视频播放设计的重量级控件，仅展示单帧时完全没必要。改用Image控件配合视频帧提取逻辑，能大幅降低UI资源消耗。

实现思路：

• 为ClipModel新增Thumbnail属性，存储提取好的单帧图像源
• 使用后台的MediaPlayer（非UI控件）加载视频，批量提取指定时间点的帧
• 将提取的帧转换为BitmapImage或WriteableBitmap，绑定到Image控件的Source属性

代码示例：

扩展ClipModel：

public class ClipModel
{
    public Uri Source { get; }
    public TimeSpan Start { get; }
    public TimeSpan End { get; }
    public ImageSource Thumbnail { get; set; } // 存储预览帧
}

提取帧的异步方法：

private async Task<ImageSource> ExtractVideoFrameAsync(Uri videoUri, TimeSpan targetPosition)
{
    using var mediaPlayer = new MediaPlayer();
    mediaPlayer.Source = MediaSource.CreateFromUri(videoUri);
    
    // 等待视频加载完成
    var mediaOpenedTask = new TaskCompletionSource<bool>();
    mediaPlayer.MediaOpened += (s, e) => mediaOpenedTask.SetResult(true);
    await mediaOpenedTask.Task;

    // 提取指定位置的帧
    var bitmapFrame = await mediaPlayer.CopyFrameToBitmapAsync(targetPosition);
    
    // 转换为BitmapImage以便绑定到Image
    var bitmapImage = new BitmapImage();
    using var stream = new MemoryStream();
    await bitmapFrame.EncodeAsync(BitmapEncoder.PngEncoderId, stream);
    stream.Seek(0, SeekOrigin.Begin);

    bitmapImage.BeginInit();
    bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
    bitmapImage.StreamSource = stream;
    bitmapImage.EndInit();
    
    return bitmapImage;
}

修改XAML的DataTemplate：

<DataTemplate DataType="{x:Type models:ClipModel}">
    <Image Source="{Binding Thumbnail}"
           Height="50"
           Width="100"
           Margin="5"
           Stretch="UniformToFill"/>
</DataTemplate>

2. 缓存视频流实现资源共享 #

针对单个视频对应大量剪辑的场景，可将视频内容一次性加载到内存流并缓存，避免重复读取文件。

实现思路：

• 构建一个视频资源缓存类，以视频Uri为键，缓存对应的MemoryStream（或保持打开的FileStream）
• 提取帧时优先从缓存获取流，未命中时再从文件加载并缓存
• 注意缓存的生命周期管理，避免内存泄漏（如使用弱引用缓存，或在视频不再被引用时释放流）

缓存类示例：

public static class VideoStreamCache
{
    private static readonly Dictionary<Uri, WeakReference<MemoryStream>> _cache = new();
    private static readonly object _lockObj = new();

    public static async Task<MemoryStream> GetOrLoadStreamAsync(Uri videoUri)
    {
        lock (_lockObj)
        {
            if (_cache.TryGetValue(videoUri, out var weakRef) && weakRef.TryGetTarget(out var stream))
            {
                stream.Seek(0, SeekOrigin.Begin);
                return stream;
            }
        }

        // 从文件加载并缓存
        var newStream = new MemoryStream();
        using var fileStream = File.OpenRead(videoUri.LocalPath);
        await fileStream.CopyToAsync(newStream);
        newStream.Seek(0, SeekOrigin.Begin);

        lock (_lockObj)
        {
            _cache[videoUri] = new WeakReference<MemoryStream>(newStream);
        }

        return newStream;
    }
}

修改帧提取方法以使用缓存流：

private async Task<ImageSource> ExtractVideoFrameAsync(Uri videoUri, TimeSpan targetPosition)
{
    var videoStream = await VideoStreamCache.GetOrLoadStreamAsync(videoUri);
    
    using var mediaPlayer = new MediaPlayer();
    mediaPlayer.Source = MediaSource.CreateFromStream(videoStream, videoUri.AbsoluteUri);
    
    // 后续帧提取逻辑同前...
}

额外建议 #

• 若需要支持更多视频格式或更高效的帧提取，可考虑使用FFmpegInteropX等第三方库，它能提供更灵活的视频处理能力
• 可实现帧提取的异步批量处理，避免UI线程阻塞
• 对可见区域外的剪辑帧实现懒加载，进一步优化初始化性能

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