HTML5 Video Error - Internet Explorer 9

3
votes

I am trying to get a .m4v video to play in IE9 using html5 video tags. When I play the video from a remote location it works fine:

<video src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" controls="controls">
</video>

But when I want to play it from my server...

<video src="Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" controls="controls">
</video>

...it only works in Chrome and not in IE9.

What could cause the video not to play when located on my server?

Many thanks,

Chris

3
html5-videointernet-explorer-9
Is the video in the same location as the HTML? – Neil Knight
Hi Ardman. Yeah, it is in the same directory. The video plays fine in IE9 when I am testing it on my localhost, but not when it is on my server. – Kit

3 Answers

5
votes

I have found the problem. IE9 RC was seeing the video as plain/text and not video/m4v so it was not able to play. Chrome and IE8 read the file correctly.

Adding AddType video/x-m4v .m4v to my htaccess made sure IE9 RC was able to read it as a video/mp4 file.

Crazy eh?

5
votes

In order for your server to associate the correct MIME types with the application, you will need to include the MIME types into your htaccess file.

Here is an example of several MIME types that you can include within your .htaccess file:

#Video MIME Types:
AddType video/m4v .m4v
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
3
votes

In addition to needing the server to send the correct Content-Type header for the requested video file itself, you should consider using a child <source> tag instead of the src attribute, eg:

<video controls="controls">
<source src="Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" type='video/x-m4v; codecs="..."'>
</video>

That will allow you to specify up-front the actual video type information so the browser can decide whether to even download the file at all. As well as give you flexibility to offer additional video types later on, if desired.