Displaying Buffer message/ mc with FLVPlayback Component.

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Flash version CS3
AS version AS3
Skill level - AS2 Flash 8 - better than Average.
Skill level - AS3 - a little better than beginner.

Problem:
Creating an FLV movie using CS3 / AS3 FLVPlayback component.
Having problems with buffering issues - large FLV file 23 MB

I'd like to add either text or an animated movie clip that displays a "buffering" message before the movie is loaded enough to play AND if the play head catches the buffer, I want it to show again until the movie has rebuffered and then disappear when it starts playing again.

I've seen countless posts and links on google searches on how this can be done with a custom player using netstream, but having a heck of a time finding anything that shows how to do it with the FLVPlayback component.

What I've done:

This is my video as it stands at the moment.
http://www.boastingrights.com/mark/g...sa_solo-2.html

I have added a progress bar per the instructions in this tutorial
http://www.adobe.com/devnet/flash/ar...ing_print.html
(I used the section titled: "Adding a progress bar component" - the code is identical to what is displayed there.)

However, even though the progress bar is displayed, it is not displayed long enough for enough of the FLV to be buffered to play smoothly.

Hence my interest in adding a 'buffering' message.
Either that, or display the progress bar long enough to buffer enough of the movie so that it doesn't stutter or stall during initial playback.

Thanks.
Mark
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

did you actually change the buffer time setting? (either through script or the component inspector) Adobe says that it isn't really an issue but I've found that you can try to force a bit longer of a buffer. As for the message you just need to check to see if the clip is buffering or not using the FLVPlayback.state so something like
Code: [ Select ]
if(FLVPlayback.state =="buffereing"){//show msg}
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

graphixboy wrote:
did you actually change the buffer time setting? (either through script or the component inspector) Adobe says that it isn't really an issue but I've found that you can try to force a bit longer of a buffer. As for the message you just need to check to see if the clip is buffering or not using the FLVPlayback.state so something like
Code: [ Select ]
if(FLVPlayback.state =="buffereing"){//show msg}



Well that's partly my problem. In AS3 buffertime is no longer available to set in the components inspector and I can't find instructions how to set it in AS3 for the FLVPlayback component. And the problem is I don't know action script 3 well enough yet to know how to set up a listener for the buffering state let alone how to display a buffering message if it is buffering.

Been searching all morning and all I'm finding are things related to netstream but not FLVPlayback doing a progressive download.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Side note.

I did find this
http://www.afcomponents.com/tutorials/f ... r_as3/211/

I think it's close to what i'm after, but having a hard time figuring out how to make it work with what I have. As noted, my action script is currently identical to what is in the link I provided above. For quick reference

Code: [ Select ]
import fl.video.*;
import fl.controls.ProgressBarMode;



// Set Variables
var flvControl = display;
var flvSource = "solo01.flv";



// Create event handler functions to control the progressbar
function progressHandler(event:VideoProgressEvent):void
{
var bl = Math.round(event.bytesLoaded/1000);
var bt = Math.round(event.bytesTotal/1000);

// Update progress...
pb.setProgress(bl,bt);
}

function readyHandler(event:VideoEvent):void
{
// Remove progressbar when we start playing...
removeChild(pb);
}

// Set progress bar state
pb.mode = ProgressBarMode.MANUAL;
pb.indeterminate = false;

// Add listeners and load the video
flvControl.addEventListener(VideoProgressEvent.PROGRESS, progressHandler);
flvControl.addEventListener(VideoEvent.READY, readyHandler);
flvControl.source = flvSource;
  1. import fl.video.*;
  2. import fl.controls.ProgressBarMode;
  3. // Set Variables
  4. var flvControl = display;
  5. var flvSource = "solo01.flv";
  6. // Create event handler functions to control the progressbar
  7. function progressHandler(event:VideoProgressEvent):void
  8. {
  9. var bl = Math.round(event.bytesLoaded/1000);
  10. var bt = Math.round(event.bytesTotal/1000);
  11. // Update progress...
  12. pb.setProgress(bl,bt);
  13. }
  14. function readyHandler(event:VideoEvent):void
  15. {
  16. // Remove progressbar when we start playing...
  17. removeChild(pb);
  18. }
  19. // Set progress bar state
  20. pb.mode = ProgressBarMode.MANUAL;
  21. pb.indeterminate = false;
  22. // Add listeners and load the video
  23. flvControl.addEventListener(VideoProgressEvent.PROGRESS, progressHandler);
  24. flvControl.addEventListener(VideoEvent.READY, readyHandler);
  25. flvControl.source = flvSource;
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

OK, I've partially solved the buffering thing. This is my current code:

Code: [ Select ]
import fl.video.*;
import fl.controls.ProgressBarMode;
import fl.transitions.*;
import fl.transitions.easing.*;
 
 
// Set Variables
var flvControl = display;
var flvSource = "solo01.flv";
 
display.bufferTime = 30;
 
mcBufferingIndicator.visible = true;
 
function onPlayerBuffered(event:VideoEvent) {
    TransitionManager.start(mcBufferingIndicator, {type:Fade, direction:Transition.OUT, duration:0.5, easing:Strong.easeOut});
}
display.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onPlayerBuffered);
 
 
// Create event handler functions to control the progressbar
function progressHandler(event:VideoProgressEvent):void
{
   var bl = Math.round(event.bytesLoaded/1000);
   var bt = Math.round(event.bytesTotal/1000);
 
   // Update progress...
   pb.setProgress(bl,bt);
}
 
function readyHandler(event:VideoEvent):void
{
   // Remove progressbar when we start playing...
   removeChild(pb);
}
 
// Set progress bar state
pb.mode = ProgressBarMode.MANUAL;
pb.indeterminate = false;
 
// Add listeners and load the video
flvControl.addEventListener(VideoProgressEvent.PROGRESS, progressHandler);
flvControl.addEventListener(VideoEvent.READY, readyHandler);
flvControl.source = flvSource;
 
 
 
  1. import fl.video.*;
  2. import fl.controls.ProgressBarMode;
  3. import fl.transitions.*;
  4. import fl.transitions.easing.*;
  5.  
  6.  
  7. // Set Variables
  8. var flvControl = display;
  9. var flvSource = "solo01.flv";
  10.  
  11. display.bufferTime = 30;
  12.  
  13. mcBufferingIndicator.visible = true;
  14.  
  15. function onPlayerBuffered(event:VideoEvent) {
  16.     TransitionManager.start(mcBufferingIndicator, {type:Fade, direction:Transition.OUT, duration:0.5, easing:Strong.easeOut});
  17. }
  18. display.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onPlayerBuffered);
  19.  
  20.  
  21. // Create event handler functions to control the progressbar
  22. function progressHandler(event:VideoProgressEvent):void
  23. {
  24.    var bl = Math.round(event.bytesLoaded/1000);
  25.    var bt = Math.round(event.bytesTotal/1000);
  26.  
  27.    // Update progress...
  28.    pb.setProgress(bl,bt);
  29. }
  30.  
  31. function readyHandler(event:VideoEvent):void
  32. {
  33.    // Remove progressbar when we start playing...
  34.    removeChild(pb);
  35. }
  36.  
  37. // Set progress bar state
  38. pb.mode = ProgressBarMode.MANUAL;
  39. pb.indeterminate = false;
  40.  
  41. // Add listeners and load the video
  42. flvControl.addEventListener(VideoProgressEvent.PROGRESS, progressHandler);
  43. flvControl.addEventListener(VideoEvent.READY, readyHandler);
  44. flvControl.source = flvSource;
  45.  
  46.  
  47.  


Basically, I added a movie clip of static text "Buffering..."
Made it initially visible and increased the buffer time by adding: display.bufferTime = 30;
(display being the instance name of my playback component).

At the beginning of the movie it does what it's supposed to.

New Problems:
The playhead position indicator disappeared.
If the playhead catches up to the buffer and the movie has to go back to buffering, it doesn't display the "Buffering..." movie clip until it has buffered enough again, and then the onPlayerBuffered event kicks in and it displays the word buffering... long enough to fade it.

I know i just need to set up a new listener so that if it goes back to buffering I just need to set the mcBufferingIndicator visibility back to true, but not sure how to write that listener.


Here's the revised movie.
http://www.boastingrights.com/mark/gods ... olo-3.html
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

OK, I solved the problem with redisplaying the "Buffering..." text when the video goes back to buffering. Now just need to find out why the playhead position indicator is no longer showing.

How I solved it, I checked into the fl.video events and found a BUFFERING_STATE_ENTERED event. (Here's a good resource on video events, btw - http://livedocs.adobe.com/flash/9.0/Act ... Event.html)

So basically I set up a function for onPlayerNotBuffered and a listener for the BUFFERING_STATE_ENTERED event. Revised code:

Code: [ Select ]
import fl.video.*;
import fl.controls.ProgressBarMode;
import fl.transitions.*;
import fl.transitions.easing.*;


// Set Variables
var flvControl = display;
var flvSource = "solo01.flv";

display.bufferTime = 30;


//fade the mcBufferingIndicator when buffered.
function onPlayerBuffered(event:VideoEvent)
{
    
    TransitionManager.start(mcBufferingIndicator, {type:Fade, direction:Transition.OUT, duration:0.5, easing:Strong.easeOut});
}

display.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onPlayerBuffered);

//Display the mcBufferingIndicator when buffering.
function onPlayerNotBuffered(event:VideoEvent)
{
mcBufferingIndicator.visible = true;
}
display.addEventListener(VideoEvent.BUFFERING_STATE_ENTERED, onPlayerNotBuffered);

// Create event handler functions to control the progressbar
function progressHandler(event:VideoProgressEvent):void
{
var bl = Math.round(event.bytesLoaded/1000);
var bt = Math.round(event.bytesTotal/1000);

// Update progress...
pb.setProgress(bl,bt);
}

function readyHandler(event:VideoEvent):void
{
// Remove progressbar when we start playing...
removeChild(pb);
}

// Set progress bar state
pb.mode = ProgressBarMode.MANUAL;
pb.indeterminate = false;

// Add listeners and load the video
flvControl.addEventListener(VideoProgressEvent.PROGRESS, progressHandler);
flvControl.addEventListener(VideoEvent.READY, readyHandler);
flvControl.source = flvSource;
  1. import fl.video.*;
  2. import fl.controls.ProgressBarMode;
  3. import fl.transitions.*;
  4. import fl.transitions.easing.*;
  5. // Set Variables
  6. var flvControl = display;
  7. var flvSource = "solo01.flv";
  8. display.bufferTime = 30;
  9. //fade the mcBufferingIndicator when buffered.
  10. function onPlayerBuffered(event:VideoEvent)
  11. {
  12.     
  13.     TransitionManager.start(mcBufferingIndicator, {type:Fade, direction:Transition.OUT, duration:0.5, easing:Strong.easeOut});
  14. }
  15. display.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onPlayerBuffered);
  16. //Display the mcBufferingIndicator when buffering.
  17. function onPlayerNotBuffered(event:VideoEvent)
  18. {
  19. mcBufferingIndicator.visible = true;
  20. }
  21. display.addEventListener(VideoEvent.BUFFERING_STATE_ENTERED, onPlayerNotBuffered);
  22. // Create event handler functions to control the progressbar
  23. function progressHandler(event:VideoProgressEvent):void
  24. {
  25. var bl = Math.round(event.bytesLoaded/1000);
  26. var bt = Math.round(event.bytesTotal/1000);
  27. // Update progress...
  28. pb.setProgress(bl,bt);
  29. }
  30. function readyHandler(event:VideoEvent):void
  31. {
  32. // Remove progressbar when we start playing...
  33. removeChild(pb);
  34. }
  35. // Set progress bar state
  36. pb.mode = ProgressBarMode.MANUAL;
  37. pb.indeterminate = false;
  38. // Add listeners and load the video
  39. flvControl.addEventListener(VideoProgressEvent.PROGRESS, progressHandler);
  40. flvControl.addEventListener(VideoEvent.READY, readyHandler);
  41. flvControl.source = flvSource;



Revised video
http://www.boastingrights.com/mark/gods ... olo-4.html


Now all I need to know is why my playhead indicator disappeared and how to get it back.
Man what a fun learning experience this is! lol
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

OK I found out why it is disappearing from this older post:

http://board.flashkit.com/board/showthread.php?t=734399

Actually in CS3 the instance name is now seekBarHandle_mc

I'll mess with lowering the buffer time later from home and see what happens.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I lowered the buffer to 2 and even nixed it entirely and at least the seekbar shows most of the time but it's sporadic. And I'm still not happy with the buffering. Still way too choppy. 23MB isn't all that large for an FLV. Feel like the first playback should be much smoother.

Here's what it looks like at the moment. Tested in IE7 and IE8, FF safari and opera.

http://www.boastingrights.com/mark/gods ... olo-5.html
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Seems like you got it working. Sorry I wasn't more help. I started a new job this week and life has been a bit crazy but hey I'm glad it works.
  • fitzpatrick1982
  • Born
  • Born
  • fitzpatrick1982
  • Posts: 2

Post 3+ Months Ago

Hello Sir

Sorry for the interruption...
Can I ask something Sir?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

There's no interuption. What's your question?

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 7 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.