Question

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>

Answer 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>