Unreadable MP4 response with <video> tag

Question

I'm trying to get my old site working with its HTML5 videos.

I have several videos on there that I've encoded into MP4, Ogg Theora, and WEBM, in order to maximize browser compatibility. Currently, it seems like Firefox is playing the video in question just fine. However, trying to view the video in IE11 doesn't seem to work correctly.

The server does appear to be configured to return a Content-Type of "video/mp4", and when I go directly to the link in question, it does download the video, and it's playable in Windows Media Player once downloaded. In my Network tab of developer tools, I actually see two requests to the URL - one has a 200 response with 4 KB of unrenderable content, and the other has a "Range" content header, and a 206 result - I guess it's something to do with being able to stream the content. I'm open to suggestions about what I could be missing.

HTML:

    <video width="500" height="300" controls="controls">
        <source src="media/pilferocalypse.mp4" type="video/mp4" />
        <source src="media/pilferocalypse.webm" type="video/webm" />
        <source src="media/pilferocalypse.ogv" type="video/ogg" />
        HTML5 Video may not be supported on your browser. You may try <a href="media/pilferocalypse.mp4">downloading</a> the video instead.
    </video>

Answer 1

Make sure that, in addition to the file being stored in an MP4 container, that it's encoded using H.264 video and AAC audio. MP4 is a general container and can store lots of types of audio and video. If it contains, e.g., MPEG-4 part 2 video and MP3 audio, then it might not play in these browsers.