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

google-chrome, html, html5-video

Solution

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".

Problem

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?

Original source