Visual artifacts when using MediaElement to play .mp4

Question

I was looking to play some videos using WPF's MediaElement control, so as a starting point I took some sample XAML code from WPF4 Unleashed (page 661 if you want to look it up).

<Grid>
    <MediaElement Name="Video" />
    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
        <Button Name="PlayButton" Background="#55FFFFFF" Height="40">Play</Button>
        <Button Name="PauseButton" Background="#55FFFFFF" Height="40">Pause</Button>
        <Button Name="ResumeButton" Background="#55FFFFFF" Height="40">Resume</Button>
    </StackPanel>

    <Grid.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="PlayButton">
            <EventTrigger.Actions>
                <BeginStoryboard Name="BeginStoryBoard">
                    <Storyboard>
                        <MediaTimeline Storyboard.TargetName="Video" Source="Path/To/Out.mp4"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>

        <EventTrigger RoutedEvent="Button.Click" SourceName="PauseButton">
            <EventTrigger.Actions>
                <PauseStoryboard BeginStoryboardName="BeginStoryBoard" />
            </EventTrigger.Actions>
        </EventTrigger>

        <EventTrigger RoutedEvent="Button.Click" SourceName="ResumeButton">
            <EventTrigger.Actions>
                <ResumeStoryboard BeginStoryboardName="BeginStoryBoard" />
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

I tried this snippet with 2 different videos, one I took from youtube and one I saved using livestreamer (from a Twitch.tv stream). However, while both WMP and VLC could play both videos perfectly fine, the above XAML sample could not play the video from Livestreamer properly (there were a lot of visual artifacts, see below).

Fixed version of the video on the left, Original on the right

What's weird is according to an answer (to this question) on MSDN:

2, If WMP12 is provided, WPF mediaElement can play mp4 without any Codec Packs.

Speaking of codecs, I looked up the codec information for both videos using VLC:

Youtube:

Codec: H264 - MPEG-4 AVC (part 10) (avc1)
Resolution: 1920x1080
Display Resolution: 1920x1080
Frame rate: 29.970029

Livestreamer:

Codec: H264 - MPEG-4 AVC (part 10) (h264)

Now this shouldn't really matter because MediaElement should as I understand have the exact same behavior as WMP.

tl;dr; What is the proper way to play videos using WPF's MediaElement? (if not the one above)

P.S: If you must know, my end goal is to playback streams from twitch.tv and do some visual analysis on the video frames (using OpenCV or some other library).

P.P.S: If I use ffmpeg to re-render/re-encode/re-save the video using: ffmpeg.exe -i Out.mp4 Out_fixed.mp4, the new version will play fine. Don't know if that helps.

LT Dan LT Dan · Accepted Answer · 2014-02-16T13:22:16

I have an a MediaElement app that will play MP4 (AVC1) files on a Primary display. However, when I drag the app window from the Primary display to a Secondary display (extended desktop), the video freezes and won't play. The MediaElement throws an "Error: Exception from HRESULT: 0xC00D11B1" which I think is the codec dieing. I have K-Lite codec pack installed so the MediaElement may be using a different codec from your app.

According to this MicroSoft page, AVC should work: Supported Media Formats, Protocols, and Log Fields http://msdn.microsoft.com/en-us/library/cc189080%28v=vs.95%29.aspx

Visual artifacts when using MediaElement to play .mp4

1 Answers