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>

JWPlayer has an option to show an image while the video is loading. Maybe Flowplayer has something similar? It would make more sense than making the image a playlist item. (It could be that the feature doesn't exist, though. I don't know Flowplayer well.) — Pekka, Apr 11 '11 at 09:56
http://flowplayer.org/demos/configuration/playlist-splash.html. I got his from the above url — Prady, Apr 11 '11 at 10:13
ah, fair enough. Then this is the official way to go I guess. — Pekka, Apr 11 '11 at 10:20
oh dear.. really i need to get my eyesight checked... the comma is the missing — Prady, Apr 11 '11 at 11:08

score 2 · Accepted Answer · answered Apr 19 '11 at 07:49

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>

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

1 Answers1