Using an Image as the First Frame of the Video with Flowplayer

Flowplayer is a great out of the box video player you can embed on your web pages to play video files, such as FLV or avi. The website to download the various files is here: https://flowplayer.org/

We’ve been using this with Drupal and Drupal’s file upload CCK field (on occassions where the Embedded Media Field option is not suitable) and have also been included a first frame screenshot image upload so that the web administrator can manually choose an image to upload to the web page which displays as the paused FIRST FRAME before the user clicks play. If you do not specify one by default Flowplayer will pause the video on frame 1, which is often blank or not representative of the video.

We’ve just used this on 4 fashion micro sites and have made use of the flowplayer’s ‘PLAYLIST’ features to create a playlist that uses the image as the first in the play list and the video as the second item. This means it shows the image but once you click play it moves on to play the video.

It’s pretty simple, the example code is shown below:

<div id="player" style="width:640px; height:360px"></div>

<!-- this will install flowplayer inside previous DIV - tag. -->

<script type="text/javascript" language="JavaScript">
flowplayer("player", "/flowplayer-3.2.7.swf",  {

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

		// this first PNG clip works as a splash image
		{
url: '/imagelocation(in this case got from the $node array)', 
scaling: 'orig'

		},

		// second clip is a video. when autoPlay is set to false the splash screen will be shown
		{
			url: '/videofilelocation(in this case got from the $node array),
			autoPlay: false, 

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