Why do only the controls show up when using HTML5 video on Chrome?

Question

I'm using the following HTML5 to display video, but only the controls show up in Chrome. Works fine in Safari and Firefox:

<video width="720" height="480" controls="controls" preload="preload">
    <source src="<?php bloginfo('url'); ?>/wp-content/uploads/Reel.ogv" type="video/ogg; codecs=theora,vorbis" >
    <source src="<?php bloginfo('url'); ?>/wp-content/uploads/Reel.mp4" type="video/mp4">
    Your browser doesn't support video.
</video>

Any ideas?

Answer 1

Looks to me like the first <source> tag has a malformed type attribute:

<source src="<?php bloginfo('url'); ?>/wp-content/uploads/Reel.ogv" type="video/ogg; codecs=theora,vorbis" >

should be type="video/ogg; codecs='theora, vorbis'" if I remember correctly. Also just try type="video/ogg".