如何在MediaComposition中实现视频效果显示在叠加层上方

MediaComposition的渲染管线是固定优先级的，和你添加元素的顺序无关，默认执行顺序为：

• 先对每个独立的MediaClip应用其绑定的VideoEffectDefinitions效果
• 再按顺序渲染所有基础媒体片段
• 接着按OverlayLayers的添加顺序从下到上渲染所有叠加层
• 最后应用MediaComposition全局绑定的VideoEffectDefinitions效果

你当前把视频效果绑定在主片段上，属于第一步执行的内容，自然会被后续渲染的叠加层遮挡，调整添加顺序也不会改变这个渲染逻辑。

方案1：使用全局效果（推荐） #

如果该视频效果需要作用于所有内容（主视频+所有叠加层），直接将效果绑定到MediaComposition的全局效果集合即可，全局效果会在所有叠加层渲染完成后执行，自然显示在叠加层上方。
示例代码：

MediaComposition composition = new MediaComposition();
MediaClip mainClip = await MediaClip.CreateFromFileAsync(someVideo);        
composition.Clips.Add(mainClip);

// 不要把效果加在mainClip上，改成加在composition全局
composition.VideoEffectDefinitions.Add(new VideoEffectDefinition(typeof(SomeVideoEffect).FullName, new PropertySet { "Data", data }));

// 叠加层逻辑保持不变
MediaClip overlayClip = MediaClip.CreateFromColor(Colors.Red, mainClip.OriginalDuration);
MediaOverlay overlay = new MediaOverlay(overlayClip);
MediaOverlayLayer layer = new MediaOverlayLayer();
layer.Overlays.Add(overlay);
composition.OverlayLayers.Add(layer);

方案2：顶层透明片段承载效果 #

如果你希望效果仅作用于部分区域，或者需要区分多层效果的上下优先级，可以在最顶层新增一个透明的MediaClip，将需要显示在叠加层上方的效果绑定到这个顶层片段上：

MediaComposition composition = new MediaComposition();
// 要放在叠加层下方的效果仍然绑定在主片段上
MediaClip mainClip = await MediaClip.CreateFromFileAsync(someVideo);        
mainClip.VideoEffectDefinitions.Add(new VideoEffectDefinition(typeof(SomeBelowEffect).FullName));
composition.Clips.Add(mainClip);

// 原有叠加层逻辑保持不变
MediaClip overlayClip = MediaClip.CreateFromColor(Colors.Red, mainClip.OriginalDuration);
MediaOverlay overlay = new MediaOverlay(overlayClip);
MediaOverlayLayer layer = new MediaOverlayLayer();
layer.Overlays.Add(overlay);
composition.OverlayLayers.Add(layer);

// 新增顶层透明片段承载要放在叠加层上方的效果
MediaClip topEffectClip = MediaClip.CreateFromColor(Colors.Transparent, mainClip.OriginalDuration);
topEffectClip.VideoEffectDefinitions.Add(new VideoEffectDefinition(typeof(SomeVideoEffect).FullName, new PropertySet { "Data", data }));
MediaOverlay topEffectOverlay = new MediaOverlay(topEffectClip);
MediaOverlayLayer topEffectLayer = new MediaOverlayLayer();
topEffectLayer.Overlays.Add(topEffectOverlay);
// 顶层叠加层最后添加，保证层级最高
composition.OverlayLayers.Add(topEffectLayer);

另外注意你原有代码中的拼写错误：compositon.OverlayLayers.Add(layer) 缺少字母i，正确拼写为composition。

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