Question

We have a page that use the and tags to enable flowplayer flash to html5 fallback. A code snippet is below:

<object id="flowplayer" width="100%" height="100%" bgcolor="#000000"
data="/flowplayer/3.2.11/flowplayer.unlimited-3.2.11.swf"
type="application/x-shockwave-flash"> 

<param name="movie" value="flowplayer/3.2.11/flowplayer.unlimited-3.2.11.swf" /> 

<param name="allowfullscreen" value="true" /> 
<param value="always" name="allowscriptaccess"/>
<param value="high" name="quality"/>
<param value="true" name="cachebusting"/>
<param value="#000000" name="bgcolor"/> 

<param value="config=/r/m/veuscqj/e8EJVo/config" name="flashvars"/>

    <video controls="controls" autoplay  style="height:100%; width:100%;">
            <source src="/veuscqj/25aRpC/20120521011327_CONT3Emp4MEDIUM_mp4-MEDIUM.mp4"
                type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
            >
    </video>    

The problem is when we set autoplay attribute for html5 player, the browser will always play the two players (flash and html5) nearly simultaneously if the given browser supports html5 and provided encodes. As a result, you will hear two audios playing at the background with seconds gap.

In theory, what we thought is the html5 player will only be trigger if the flash object failed to load, however, in reality it appears both player being loaded regardless the browser.

The issue will not occur if the autoplay is disabled for html5.

Any one can help us to solve the issue?

Answer 1

Excuse my previous answer.

I have, however, found you an alternate solution. We need to check whether flash is available, correct?
If that’s the case, this link might prove useful.

The point being, you can use swfobject to create an if / else structure to determine what needs to be displayed and therefore executed.