HTML 5 Fully Compatible Video Player

programming web dev
1

Greetings,

I am trying to compile the code necessary to present video across all platforms by making use of the HTML 5 tags. I’m having an issue with this process and I’m hoping someone here will be able to explain whats going on.

I’m using the Video for Everyone approach to the HTML code, and I am using Flowplayer as the fall-back option for non HTML 5 compatible browsers. My code currently looks like this:


<video width="320" height="176" controls="controls">
	<source type="video/mp4" src="myVideo.mp4" />
	<object width="320" height="176" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
		<param name="flashvars" value='config={"clip":myVideo.mp4"}' />
	</object>
</video>

The code above will correctly display myVideo.mp4 in Chrome and IE (in the native HTML 5 player - however it fails in FF and Opera…

If I use ONLY the flowplayer <object> code, the video plays fine in every browser as Flash takes over the decoding of the .mp4 file. However, when I try to stick the Flash player in the <video> tag (like above) as a fall-back option, it seems that FF and Opera are just attempting to use the .mp4 with their native video player, but FF and Opera do not support h.264 and so they just give up.

But why don’t FF and Opera recognize that they cannot play a .mp4 file and move on to the Flash <object> element? Is it that the Flash fall-back option will ONLY work in browsers that do not understand the <video> tag? That is, if I use an HTML 5 compliant browser that does not have the necessary codec, that browser will not attempt to use the <object> element? While an older browser that does not support HTML 5 at all will somehow know to ignore the <video> tag but still pull out the <object> tag and process the flash content?

I’m really just unsure how browsers are handling this code exactly and thats making it difficult for me to understand the necessary solution. I know the common solution is to offer a .mp4 and a .ogg file for HTML 5 browsers, but in my case re-encoding my .mp4 to .ogg is not a reasonable option, and I’d like to just use the Flash player in the case that either the browser does not support HTML 5, or the browser does not support he desired codec. Can anyone help?

Thanks.

Matt