html5 video tag + flash video: how to change priority

Question

hello!

i'm playing around with html5 video cause it's nice to have fallback for iphone/ipad. html5 video first checks for <source> elements, if no formats are supported it falls back to whatever content is provided inside the <video> tag (e.g. flash).

i'd love to reverse the behaviour to save bandwidth: use flash by default, if not available fall back to html5 video.

is there any way to get this behaviour without using javascript? (then the solution gets quite obvious).

best, hansi,-

p.s. i did try turning the elements "inside-out" (<object><video/></object> instead of <video><object/></video>, but that results the video displayed twice)

p.p.s. my current solution is

if( navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] ){ ... }
else{ ... }

which is sub-optimal, cause it works for iphone/ipad, but results in a big mess when using old browsers without flash installed.

Answer 1

thanks "zach at longtail"!, that worked!

for reference, here's how to get the "flash first, then html5" behaviour:

<object type="application/x-shockwave-flash" width="..." height="..." data="...">
    <param name="movie" value="..." />
    <video width="..." height="...">
        <source src="..." type="video/mp4" />
        <source src="..." type="video/webm" />
        <source src="..." type="video/ogg" />
    </video>
</object>

For providing html5-alternatives to youtube/vimeo embeds: Please note that having the <object data="..." /> attribute is crucial and that it is missing in the embedding code that youtube/vimeo/etc. provide. Make sure to change that, just throwing the <video/> tag in the code you copy+pasted will give you exactly the headache i had.