IE10 not playing a video when using the <video&

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 had this same issue which was a real pain in the ass. My solution was actually quite simple (after searching on the internet for about 4 hours).

Add this line (specific for IE) to your .htaccess file.

AddType video/mp4 .mp4 .m4v

Answer 2

Make sure you set the web server to use MIME type video/mp4 for .mp4. I accidentally set .mp4 to use MIME type video/mpeg, the video plays in Chrome, but not in IE11.

Answer 3

If it directly plays find when you put the .mp4 URL into the browser make sure it's not running with the Quicktime plugin which you may have installed (especially if you use iTunes). Right click on the successfully playing video to rule that out. If it comes up with menu items related to Quicktime you may want to disable Quicktime plugin in adins and continue troubleshooting.

Sample MP4 video: http://www.w3schools.com/html/mov_bbb.mp4

Answer 4

Now it is very easy to update mime type for your videos on amazon s3,

Just login and navigate to your file, under preferences you will see metadata, there you can edit content-type

Save it and reload your page.

Answer 5

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.

Answer 6

When you paste the URL to your browser it doesn't use HTML5 player anymore, so it doesn't say that it is really a supported file; only that the file path should be valid.

According to wikipedia, IE10 supports (not only) H.264 for video and AAC for audio - these are very common formats for mp4 container. Chrome's support is much wider (video- and audio-wise).

The problem is that the Intro.mp4 file might have different formats altogether (the file could by just renamed or created using unsupported formats).

I'd look into the file using properties->details or third party programs (for example Media Info).

I don't think it is IE10's issue. The only similar one I've found is when the user was too specific using unsupported format of used codecs ([...] type='video/mp4; codecs="H.264, AAC"' [...]).