Default Image Before Playing Created Jan 12, 2009

This is possible if you have pseudostreaming enabled and by using the start parameter. Look for this demo

http://flowplayer.org/demos/streaming/first-frame.html

I want to show a specific image. For example I have a custom CCTV system where I have a video and I have an image of the specific frame with the most motion and a red box around the moving object.

How do I get flowplayer to show this image until I press play?

I can visualize what you're needing. Your system is showing motion detection and drawing rectangles around the areas of the video that are showing the most motion (like Mr. Burglar walking across the frame).

The trick here is to make the image yourself. You can very easily do it using any number of free or paid tools that can take a snapshot of a specific frame of your video. (See my note below regarding frame accuracy.)

This is how YouTube and others do it. During the conversion process they take a "poster frame" from some point, such as 10 seconds in or whatever. They then attach that poster frame as the initial frame.

Let's assume you have made a poster frame from the exact frame you want. One way to do it is a playlist splash image, as discussed here:

http://www.flowplayer.org/demos/configuration/playlist-splash.html

Play with the autoBuffering: key as needed. The still should load faster when this is set to false, but then there's a delay when they click to play, as your video has not yet been buffered.

There are other methods described here, which demonstrates how to have any image of your choice as the poster frame, and also any overlayed" play" image of your choice on top of that:

http://www.flowplayer.org/demos/skinning/splash-scripted.html

The thing about Flowplayer is there's usually more than one way to do things! So, you just have to figure out what way works best for you.

Now for the discussion of frame accuracy. FLV files are notorious for not allowing you to frame step, because of the way keyframes work in the Flash environment. I am assuming your CCTV videos are not compressed directly in FLV format (that would be bad anyway, as most law enforcement need higher quality).

If you're going from MPG, AVI, or most other sources, you can often frame step anywhere in the timeline to pick the exact frame you want to capture. Programs like VideoCharge can do this, but you can also do it with ffmpeg if you don't mind spending some time tweaking the command-line parameters.

In a punch (and with hardware acceleration turned off) you can always display the video in your fav video player, hit Print Screen to capture the screen to the clipboard, and then crop it using an editing program - even Windows Paint will work here. Save as a JPG or PNG and you're all set.

Gordon

Thanks for the reply,

I already have the best image stored as a jpeg file, that's not the problem. The problem is how do I show it without playing the video?

I think the first method you suggested might work but can the video start buffering while the image is showing? -- the second method seems to just show the first frame of the video which is not what I want.

I'm currently (reluctantly) using jwplayer as it has this feature and all I have to do there is this:

var flashvars = {
file:"/cctv/view/video/7211/43941.mp4",
image:"/cctv/view/image/7211/43941.jpg",
}

It will show the jpeg image and can start buffering the video.

Is there anyway to do the same with flowplayer?

Here is a live demo of all this in action to give you an idea of the project:http://leom.homeip.net/cctv/events
Username: demo Password: demo

The links I provided show you how to do what you want, and you can take your pick as to how you want it to look. The best thing to do is copy and paste the stand-alone code, modify it for your environment, and experiment.

Check out the stand-alone version here:

http://www.flowplayer.org/demos/configuration/playlist-splash.htm

Note that autoBuffering is set to true in this example, and indeed, the movie is buffering behind the splash image.

Gordon

Thanks for that, that is brilliant. I will replace jwplayer with flowplayer tomorrow :)

This little project is really coming along.

Replaced jwplayer with flowplayer but doesn't seem to work correctly on Safari. For some reason the video won't play on safari until I refresh the page and press play again.

Any ideas?

This kind of thing is often the result of a script error. Script errors can affect different browsers in different ways.

I'm pretty sure the Flowplayer designers use Macs, so they'd have Safari, and therefore I doubt this is a universal thing!

Provide a public URL of your test page because otherwise there's no telling what the problem is.

Gordon

No code errors, but finally figured out what was causing it - I was serving the files with django and it was setting various http response headers that I guess safari flash plugin didn't like. I switched to using the XSendFile apache module and the problem went away :)

Everything seems to be snappier too - apache is a lot more efficient in serving static content. Could be in my head though :)

Anyway, yay! - flowplayer is working brilliantly :)

Following is a part of my code:-

=================================
<script src=http://192.168.0.86/examvillage/js/flowplayer-3.0.1.min.js"></script><script>

window.onload= init;

var playerObj = null;

function openplayerwindow () {

document.getElementById("playercontainer").style.display = 'block';
return(false);

}

function closeplayerwindow () {

playerObj.stop();
document.getElementById("playercontainer").style.display = 'none';
return(false);

}

function init() {
playmovieTop = document.getElementById("video").offsetTop - 220;
playmovieLeft = document.getElementById("video").offsetLeft + 40;

document.getElementById("playercontainer").style.top= playmovieTop + 'px';
document.getElementById("playercontainer").style.left= playmovieLeft + 'px';

document.getElementById("playmovie").onclick = openplayerwindow;
document.getElementById("closeplayericon").onclick = closeplayerwindow;
document.getElementById("closeplayerlink").onclick = closeplayerwindow;

configflvloader = {
playlist : [
// JPEG Image
{
url: 'http://192.168.0.86/examvillage/images/content/playvideoonhomepage.png'

}
,
// FLV Movie
{
url: 'http://192.168.0.86/examvillage/video/moviedesktop.flv',
autoPlay: false,
autoBuffering: true // video will be buffered when splash screen is visible

}
],

plugins: {

// default controlbar is called "controls". by tweaking these it tweaks the default controlbar
controls: {

// Control bar display properties
height: 30,
backgroundGradient: 'low',

// controlbar specific settings
all: false,
play: true,
volume:true,
scrubber:true,
mute:true
}
},

onLoad: function() {
this.setVolume(50);
}
}

playerObj = flowplayer("loadplayer", http://192.168.0.86/examvillage/player/flowplayer-3.1.3.swf", configflvloader);


}
</script>
==============================

If "autoBuffering" is set to true - the display image comes and goes - the video comes and stops.

If I set ""autoBuffering"" to false - the display image stays and everything except buffering is fine. How to fix it?

When I use the playlist method of showing a splash image instead of the minimal installation that uses the < img > tag, iphones start showing the usual "no flash player" error.
How can I get to work the autobuffer, the splash image and the iphone support at the same time?

I don't think you can easily keep a splash with iDevice support. The iPad plugin replaces the whole flowplayer flash movie with an HTML5 video tag which won't support static images.

I've edited the iPad plugin to skip anything in the playlist that's not supported on iPhones etc, and that seems to work for me now. I'll submit it to the flowplayer devs today.