Display First Frame Of Video Created Nov 8, 2008

Just add following to the clip:

clip: {
  autoPlay: false, autoBuffering: true
}

Thank you. That worked.

However I would actually prefer that the entire clip not be buffered when the page is loaded. Is there a way that you could limit buffering to say just the first few seconds or minutes? Just enough to load the first frame and get the time length of the clip?

It will be possible to do it like this:

var bufferingStopped = false;
flowplayer("player", "../flowplayer.swf", { 
	clip: {
	   	onMetaData: function() { 
	   		if (bufferingStopped) return;
	   		this.stopBuffering();
	   		bufferingStopped = true; 
	   	}
	 }
});

This will load until the metadata is loaded, the first frame is shown, and the duration is shown in the time field. In the onMetaData listener-function we call stopBuffering() that will stop loading the video file.

The fix using the onMetaData event to kill buffering after the metadata has been loaded doesnt seem to work now that the onMetaData function has been changed to onBegin (it doesnt seem to work using the onBegin) function either. Is there another way to just display the first frame of the video now without buffering the entire film?

Fabulous product btw!!

Thanks, Chris.

Please try with onStart! onStart is the same as the old onMetaData.

Very many thanks, that did the trick nicely!!

When you fire the this.stopBuffering() method, the button in the tool bar is left with the pause button shown, despite playback being now paused, and likewise, the main play button in the center of the screen also doesnt come up.

I have tried adding a this.stop() either before or after the stopBuffering. When it is before the stopBuffering call, it does stop play, and put up the main play button, although the toolbar button is still left as a pause button, and the file continues to be buffered. When it is after the stopBuffering call, it has no effect at all.

Any ideas? (It might be a nice future feature to simply have a showFirstFrame: true property, rather than having to cludge it like this?).

Thanks, Chris.

I'm fixing these now.

Scripting the player in events is "normal" and we don't consider it to be a gludge. It's just a way to change the default behavior.

ok, I will await the next build with interest!

Just to say it is also a really nice change to have a support forum that is so actively monitored and responded to. Good work!!

Chris.

I can't get the code to function proberly. When the page is loaded for the first time the screen turns up without the first frame - but if I reload the page the first frame appears. It happens both with IE, Firefox and Chrome. I can't find out what is wrong - please find a "stand alone" example here:
http://www.jozan.net/videos/FirstFrame.htm

Ivan

Have you forgotten autoBuffering: true ?

Thanks for your advice but it makes no difference if I include autoBuffering: true in the clip

example:http://www.jozan.net/videos/FirstFrame.htm

Ivan

Yes, I can reproduce the issue if I empty the cash before loading
the page. However I think I've found a workaround. Try:

var bufferingStopped = false;
function stopbuff () {
  if (!bufferingStopped) {
    $f().stopBuffering();
    bufferingStopped = true;
  }
}
$f("player", "flowplayer.swf", {
  clip: {
    autoBuffering: true,
    onStart: function() {
      setTimeout(stopbuff, 1000);
    }
  }
});

I keep my fingers crossed that this works for you as well ;-)

Great - thanks - it works. Now I need to test the work around with different values of setTimeout. I have tryed with 250 ms, to avoid sound from the music, and it works but I have a fast connection.

example:http://www.jozan.net/videos/FirstFrame2.htm

Ivan

Hm, it works around.

Why do you put all the effort in JavaScripting this?

IMHO, a much cleaner solution would be with a splash image, a variation of the examples to be found here and elsewhere. This would make your page load even faster than stopBuffering() ever will.

OTOH, if you don't care about loading time why bother about buffering?

I believe using a splash image is much better, but this is how you could do it in JavaScript:

var bufferingStopped = false;
function stopbuff () {
  if (!bufferingStopped) {
    $f().stopBuffering();
    $f().setVolume(100);
    bufferingStopped = true;
  }
}
$f("player", "flowplayer.swf", {
  clip: {
    autoBuffering: true,
    onStart: function() {
      setTimeout(stopbuff, 1000);
    }
  },
  onLoad: function () {
    this.setVolume(0);
  }
});

Great - thanks for solving the problem for me.
Actuelle I do use splash images but I was looking for an easier way. The Flowplayer solution with autoPlay:false and autoBuffering:true is clean but uses a lot of bandwith. The method you have showed me has not these disadvantages. It works fine !!

Ivan

When I try this code, I just get a spinning circle with no Play button. Here is the code:

<!-- include the only required JavaScript file --> 
				<script src="/c/s/js/flowplayer-3.0.3.min.js"></script> 
				
				<!--     
					Setup player with standard HTML syntax       
						* movie file is specified in "href" attribute        
						* player dimensions are defined with CSS   
				--> 				
				<a      
					href="#"      
					style="display:block;width:320px;height:270px;"      
					id="player"> 
				</a>  
				
				<!-- this script block will install Flowplayer inside previous anchor tag --> 
				<script language="JavaScript"> 
					var bufferingStopped = false; 
					function stopbuff () 
					{   
						if (!bufferingStopped) 
						{     
							$f().stopBuffering();     
							$f().setVolume(100);     
							bufferingStopped = true;   
						} 
					} 
					$f("player", "/c/s/i/flowplayer.commercial-3.0.3.swf", {
						key: '#removed',
						clip: {
							url: 'videolots/4/6/1/7/4617110',
							provider: 'ha',
							autoPlay: false,
							autoBuffering: true,
							onStart: function() {
								setTimeout(stopbuff, 1000);
							},	
							scaling: 'orig'
						},
						onLoad: function () {
							this.setVolume(0);
						},
						plugins: {
							'ha': {
								url: '/c/s/i/flowplayer.rtmp-3.0.2.swf',
								netConnectionUrl: 'rtmp://stream2.ha.com/vod'
							}
						}
					});	
				</script>

The JavaScript you provided works pretty well. However, the video buffers for 10 seconds; it stops; then, the buffer jumps back to 0 seconds. When you click play you have to wait for it to buffer again, as if it never initially buffered the first 10 seconds. Does anyone know why it's doing this?

Here is my javascript:

var bufferingStopped1 = false;		

function stopbuff1 () {
  if (!bufferingStopped1) {
	$f("player1").stopBuffering();
    bufferingStopped1 = true;
  }
};

flowplayer("player1", {src: "/site/swf/flowplayer/flowplayer.commercial-3.1.5.swf", wmode: 'opaque'}, { 
				clip: {
					autoPlay: false,
					autoBuffering: true,
					onStart: function() {
						setTimeout(stopbuff1,10000);
					}
				},
				//this controls Flowplayer's control bar and embedded video
				plugins: {
					controls: {
						url: '/site/swf/flowplayer/flowplayer.controls-3.1.5.swf',
						height: '24px',
						background: '#333333',
						backgroundGradient: 'low',
						timeColor: '#ffffff',
						progressColor: '#006bb6',
						bufferColor: '#00487b',
						bufferGradient: 'low',
						play:true, 
						volume:true, 
						mute:true, 
						time:true, 
						stop:false, 
						playlist:false, 
						fullscreen:true,
						sliderColor: '#000000',
						sliderGradient: 'low',
						volumeSliderColor: '#0096ff',
						buttonColor: '#000000',
						playHeadClass: 'playhead',
						playClass: 'play',
						timeBgHeightRatio: 0.5,
						volumeBarHeightRatio: 0.8,
						tooltips: {
							buttons: true
							}
						
					}
				},
				play: { width: '100px', height: '52px' }
		
});

Hi,

I'm looking at the above code and I've tried implenting this and it works fine with one player but when I have multiple players on the page the rest of them all seem to just continue autoloading.

I assuming that I need to do something like the following:

var bufferingStopped = false;
function stopbuff ($playerId) { 
  if (!bufferingStopped) { 
    $f($playerId).stopBuffering();
    bufferingStopped = true;
  } 
}

$f("player", "flowplayer.swf", { 
  clip: { 
    autoBuffering: true, 
    onStart: function() { 
      setTimeout(stopbuff("player"), 1000);
    } 
  } 
});

... But I don't think I quite have that working correctly as I probably need to create a bufferingStopped var for each instance? Not really sure how to create a var for each and then have the function change the value for it.

Does that make sense?

Can anyone help?

Thanks in advance,
Millo

To display first frame of video,it is just enough to do by setting autoBuffering to true.
Just see the following code
theme('flowplayer', array(
'clip' => array(
'url' => $video,
'autoPlay' => FALSE, // Turn autoplay off
'autoBuffering' =>TRUE,
),
),
$id, array(
'style' => "width: $width; height: $height",
));
duplicacion dvd

var bufferingStopped = false;
function stopbuff () {
if (!bufferingStopped) {
$f().stopBuffering();
bufferingStopped = true;
}
}
$f("player", "flowplayer.swf", {
clip: {
autoBuffering: true,
onStart: function() {
setTimeout(stopbuff, 1000);
}
}
});

Thanks for the code.
Disaster Recovery