showing an image as firstframe using flowplayer and on clicking the image play the video

Question

I am using flowpalyer to play video. I am trying to get to show an png image as start image instead of the regular black screen. But for somereason its not working can anyone help me i dentify what the problem is

<script type="text/javascript" src="http://brianhaskins.com/protege/flowplayer-3.2.2.min.js"></script>

<div style="width: 290px; padding-bottom: 0px;" id="optin">
<div style="width:264px;height:198px;border:1px solid red;">
<a  href="http://brianhaskins.com/blogvideo/blogoptinfinal/blogoptinfinal.mp4" 
style="display:block;width:290px;height:171px;"     id="player"> </a>
<script language="JavaScript">
flowplayer("player", "http://brianhaskins.com/protege/flowplayer-3.2.2.swf"{

    // here is our playlist with two clips
    playlist: [

        // this first PNG clip works as a splash image
        {
            url: 'http://brianhaskins.com/blogvideo/blogoptinfinal/FirstFrame.png', 
            scaling: 'orig'
        },

        // second clip is a video. when autoPlay is set to false the splash screen will be shown
        {
            url: 'http://brianhaskins.com/blogvideo/blogoptinfinal/blogoptinfinal.mp4', 
            autoPlay: false, 

            // video will be buffered when splash screen is visible
            autoBuffering: true 
        }
    ]
});</script>
</div>

Answer 1

Here is the code which i used. Hope it helps others who are in a position i was

</script><script type="text/javascript" src="http://brianhaskins.com/protege/flowplayer-3.2.2.min.js"></script>

<div style="width: 271px; padding-bottom: 0px;border:3px solid #ccc;margin:0 auto" id="optin">
<div style="width:264px;height:198px;margin:0 auto">
<a  href="http://brianhaskins.com/blogvideo/blogoptinfinal/blogoptinfinal.mp4"  style="display:block;width:264px;height:198px;z-index:300"  id="player"> </a>
<script language="JavaScript">
     flowplayer("player", "http://brianhaskins.com/protege/flowplayer-3.2.2.swf",{

// here is our playlist with two clips
playlist: [

    // this first PNG clip works as a splash image
    {
        url: 'http://brianhaskins.com/blogvideo/blogoptinfinal/FirstFrame.jpg', 
        scaling: 'orig'
    },

    // second clip is a video. when autoPlay is set to false the splash screen will be shown
    {
        url: 'http://brianhaskins.com/blogvideo/blogoptinfinal/blogoptinfinal.mp4', 
        autoPlay: false, 

        // video will be buffered when splash screen is visible
        autoBuffering: true 
    }
]
});</script>