internet explorer 10 - IE10 not playing a video when using the <video> tag, but plays it when requesting the video directly

Question

I have a webpage with a tag on it with the following markup:

<video width="456" height="360" controls autoplay>
    <source src="Movies/Intro.mp4" type="video/mp4" />
    <source src="Movies/Intro_H264.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
    <source src="Movies/Intro_H264.ogg" type='video/ogg; codecs="theora, vorbis"'/>
</video>

If I visit this page in IE10 it renders the video player but with an error message that reads: "Error: unsupported video type of invalid file path"

But what's odd is if I right-click on the video box and choose, Copy video URL, and then open a new tab in IE and paste in the direct URL to the video file (Movies/Intro.mp4) it plays in the browser without issue.

Also, I can visit the page using Chrome and it plays the MP4 video from the webpage without issue. All that to say, I don't think there's any issue with the video file itself or the encoding, but why is IE 10 not playing the video when it's in the tag, but it is playing it when requesting the video directly?

Any insights?

Thanks

Answer 1

I would check whether the mime-type is correctly being returned for the file.

Chrome will play correctly regardless of the MIME Type returned.

To check:

1. Press F12 to display the IE Tools Window/Pane.
2. Go to the Network Tab
3. Click Start Capturing
4. Browse to the page in question
5. Find the mp4 line
6. If the Type is displayed as application/octect-stream then this is your issue.