Both html5 video and flash fallback loading if browser supports both

问题

I'm doing Html5 video play on my project with flash fallback (if it doesn't support html5). But both players are loaded if browser supports both. help me.

<video controls="controls" preload="auto" poster="image.url" >
    <source src="video.url" type="video/ogg" />
    <source src="video.url" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
<object type="application/x-shockwave-flash" data="flowplayer-3.1.1.swf">
   <param name="movie" value="flowplayer-3.1.1.swf" />
   <param name="allowFullScreen" value="true" />
   <param name="wmode" value="transparent" />
   <param name="flashVars" value="config={'playlist':['image.url',
       {'url':'video.url','autoPlay':false}]}" />
   <img alt="Image" src="" width="191px" height="256px" 
       title="No video playback capabilities, please download the video below" />
</object>

回答1:

Just place the <object> inside the <video> tag, making it siblings with the source tags. If the browser does not support <video>, it renders the contents inside, similar to <noscript> if scripts were off.

<video controls="controls" preload="auto" poster="image.url" >

    <source src="video.url" type="video/ogg" />
    <source src="video.url" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>

    <object type="application/x-shockwave-flash" data="flowplayer-3.1.1.swf">
       <param name="movie" value="flowplayer-3.1.1.swf" />
       <param name="allowFullScreen" value="true" />
       <param name="wmode" value="transparent" />
       <param name="flashVars" value="config={'playlist':['image.url',{'url':'video.url','autoPlay':false}]}" />
       <img alt="Image" src="" width="191px" height="256px" title="No video playback capabilities, please download the video below" />
    </object>

</video>

来源：https://stackoverflow.com/questions/8753846/both-html5-video-and-flash-fallback-loading-if-browser-supports-both