HTML5 video problem

Question

hey guys, i wonder what i'm doing wrong?

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

this peace of code lies in my index.html. in the same directory i got all 3 videofiles (mp4, webm, ogv)

Somehow the video component shows up, however no video gets played. A big X shows up inside of the video component.

Answer 1

On which browser? IE for example doesn't support the video element at all. Also, the course element is a void element and as such shouldn't have an end tag. I've also noticed a bug in Firefox where the Ogg file has to be the first resource otherwise it doesn't work. This may have been fixed in 3.6.3 though.

Answer 2

My guess is that this is a duplicate of an earlier question. If so, the answer is: Make sure your server config has the following associations:

• .ogv: video/ogg
• .oga: audio/ogg
• .ogg: application/ogg
• .webm: video/webm
• .mp4: video/mp4

Answer 3

Firefox 3.6 doesn't support WebM video format. To view HTML5 WebM videos you need to download a nightly build of Firefox 4

For Ogv take care of frame rates and don't expect to show HD video. With a higher rate Firefox couldn't show my video, but when I reduce the frame rate and the quality, it works fine.

Answer 4

You need to escape the double quotes for the codecs parameters.

e.g. 'video/ogg; codecs=\"theora,vorbis\"'

Or better still: don't use any quotes around the codes.

See also https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox