Flowplayer loads but doesn't play video in Google Chrome, works in other browsers

Question

I am using Flowplayer to play videos on a site I am working on. The videos play fine in Mozilla and IE, but when Chrome is used the video does not play when you click on the play button. It just kind of loops real quick and goes back to the play button. I KNOW the video is there, however, because if you progress the video a couple of seconds it will continue to play fine.

Here is my current configuration for the flowplayer:

$(".videoPlayer").flowplayer({
         swf: "//releases.flowplayer.org/5.4.6/flowplayer.swf",
         debug: true,
         autoplay: true,
         engine: 'flash',
         volume: 1
    });

And for the fancybox continaing the video:

$(".variousVideo").fancybox({
   //maxWidth  : 700,
    //maxHeight  : 500,
     //fitToView  : true,
      width    : 600,
      height    : 375,
      autoSize  : false,
      closeClick  : false,
      openEffect  : 'none',
      closeEffect  : 'none',
      helpers : {
       overlay : {
         css : {
            'background' : 'rgba(0, 0, 0, 0.33)'
          }
        }
      }
    });

And here is how I define the elements in HTML:

<p>
   <span class="newstitle">
      <a class="variousVideo" href="#player0">0029415_BLTV_11-21-2011_713am.mp4</a>
   </span>
</p>

<div id="player0" class="videoPlayer">
    <video>
       <source type="video/flash" src="/apsite/videos/0029415_BLTV_11-21-2011_713am.mp4">
    </video>
</div>

Now, this is quite strange, but I CAN get the video to play in Chrome, IF I use the default class "flowplayer", instead of "variousVideo". The problem is that it is not using flash, (at least I don't think), and well frankly it looks terrrible that way. So can anyone help me out here? What am I doing wrong or missing to make this video play the same on Chrome as it does the other browsers? Thanks a lot!

Answer 1

With some help from the people at Flowplayer I have resolved this issue. Flowplayer by default uses a HTML5 engine. I was forcing that engine to be flash with engine: 'flash'. This is wrong! Here is a simple, working configuration that I have tested on all browsers:

$(".videoPlayer").flowplayer({
   swf: "//releases.flowplayer.org/5.4.6/flowplayer.swf",
   adaptiveRatio: true
});

More configuration options are available here.