HTML5 video only works in IE. The other browsers s

Question

I have to develop an html5 application that runs on all major browsers (Chrome, Firefox, IE9, Safari and Opera) and one of the things requested was for it to be able to play videos as well. I'm using the video tag and 2 different formats of the video they provided:

<video width="640" height="360" controls autoplay="autoplay">
    <source src="../videos/grafico.ogg" type="video/ogg"/>
    <source src="../videos/grafico.mp4" type="video/mp4"/>
    Your browser doesn't support video
</video>

My problem is this only runs on IE. On Chrome, Firefox and Opera it opens the player but the image is black. And on Safari it only shows the "Your browser doesn't support video" message. I've also tried to use videojs, but the black screen problem persists. This is occurring while playing locally by the way (I don't have access to the server).

I have no idea what I'm doing wrong, nor do I have much knowledge on how to handle video to begin with. Does anyone know what I should do?

Answer 1

<video width="320" height="240" controls="controls" autoplay="autoplay">

Try this way. tested in all browsers for me and works.

Answer 2

First, you'll want to put your MP4 source first. There was an issue on older iPads where they wouldn't look past the first source in the list.

For Chrome, Firefox, and Opera, it's probably either an issue with the ogg file itself or the MIME type being sent by your server for that file. Check to make sure the ogg will play elsewhere, like VLC.

If it does, change the extension to .ogv. That shouldn't make a difference, but it's more right. Then add these lines to you .htaccess file. This is from the HTML5 Boilerplate.

# Audio
AddType audio/mp4                      m4a f4a f4b
AddType audio/ogg                      oga ogg

# Video
AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm
AddType video/x-flv                    flv

That seems to be the #1 reason ogg files don't play in HTML5 video for people.

As a side note, you might want to consider also making a WebM file, or using instead of Ogg. It has a better compression to quality ration. You can use Firefogg.org to make a WebM for free.

I can't see why IE would play the MP4 and Safari wouldn't, but hopefully these fix that issue too. Cheers.