Problems trying to use Flowplayer as flash fallback to html5 video

Question

I've now successfully managed to get html5 video tags to work and I'm now trying to implement a flash fallback solution using Flowplayer. Below is my code:-

<div id="videocontent">
            <video width="640" height="360" autobuffer controls preload="auto" >
              <source src="fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
              <source src="fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'>
              <source src="fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'>                <object type="application/x-shockwave-flash" data="flowplayer-3.2.7.swf" width="640" height="360">
                <param name="movie" value="flowplayer-3.2.7.swf">
                <param name="allowFullScreen" value="true" />
                <param name="allowscriptaccess" value="always">    
                <param name="flashVars" value="config={'playlist':[{'url':'http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.mp4','autoPlay':false}]}" />
             </object>
          </video>
    </div>

This is the link to the video:

http://www.synergese.co.uk/testMathsOnline/day3/videos/day3FracWelVideo.html

In order to test this in Firefox, I commented out the line which referenced the .ogv file.(The commenting doesn't show here. When I included it here on this page, the text below the commenting disappeared) However, when I test it in Firefox, I just get a grey box. I would be very grateful if someone could help.

Many thanks, Pippa

Thanks, but I'm still really stuck. I downloaded VideoJs and implemented, (I think accordingly). `Below is my code:-

<script src="video.js" type="text/javascript" charset="utf-8"></script>

// Add VideoJS to all video tags on the page when the DOM is ready VideoJS.setupAllWhenReady();

            <div id="videocontent">
        <div class="video-js-box">
            <video width="640" height="360" preload="" controls="" poster="day3Wel.jpg" class="video-js" tabindex="0" >
              <source src="fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
              <source src="fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'>
              <source src="fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'>
            <object type="application/x-shockwave-flash" data="flowplayer-3.2.7.swf" width="640" height="360" class="vjs-flash-fallback">
                <param name="movie" value="flowplayer-3.2.7.swf">
                <param name="allowFullScreen" value="true" />
                <param name="allowscriptaccess" value="always">    
                <param value="config={'clip':{'url':'fracWelDay3.mp4','autoPlay':false,'autoBuffering':true, 'scaling':'orig'}}" name="flashvars">
                <!-- Image Fallback -->
                <img width="640" height="360" title="No video playback capabilities." alt="Poster Image" src="day3Wel.jpg">
               </object>
          </video>
        </div> 
        </div>               

The Flowplayer seems to load, but I get an error message saying that the video clip won't load and I don't know why. Many thanks for your help

Answer 1

on the object... place an id.. that is one of the things i realized with flowplyer.. most probably you have the 2124 error.. unable to load resource.. right??

.......... ...

that should do the trick..