Skip navigation
Currently Being Moderated

seamlessly looping FLVPlayback video no longer seamlessly looping

Oct 3, 2012 10:56 AM

Tags: #as3 #swf #action_script_3 #movie

Hi,

 

Back in 2009 I created seamless video loops using the FLVPlayback component and 'addEventListener' (as3)—and they worked great!  looping round and round seamlessly—equally well in browsers as in flash. The videos were of varying lengths, small (all between 50—500K), and they looped perfectly.

 

Recently I've gone back to update things and noticed that my video loops are no longer seamlessly looping in any of the web browsers. Now there's a big pause interrupting the seamless flow.

 

  ??? why?  Has something in the delivery (browsers/flashplayer) changed?  All my video loops still run seamlessly when tested in Flash (CS5).  I spent a good amount of time investigating various angles but could not find any solution.

 

 

  Anyhow, here's the actionscript:

 

  stop();

 

  import fl.video.*;

 

  toggleButton.addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);

  toggleButton.addEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);

  toggleButton.addEventListener(MouseEvent.CLICK, toggleClick);

 

  toggleButton.buttonState = "off";

      function rolloverToggle(event:MouseEvent):void {

      toggleButton.gotoAndStop(toggleButton.buttonState+" over");

      }

      function rolloutToggle(event:MouseEvent) {

      toggleButton.gotoAndStop(toggleButton.buttonState);

      }

      function toggleClick(event:MouseEvent):void {

          if (toggleButton.buttonState == "on") {

              toggleButton.buttonState = "off";

         vid_16_monty.pause();

          }else {

              toggleButton.buttonState = "on";

         vid_16_monty.play();

      vid_16_monty.addEventListener(VideoEvent.COMPLETE, rewind);

      function rewind(event:VideoEvent) {

         vid_16_monty.play();

          }

                }

          toggleButton.gotoAndStop(toggleButton.buttonState+" over");

      }

 

 

the video that goes with the above script can be viewed here:  http://www.designfail.us     cat should be in seamless motion... but it's not.

 

 

 

 

Also, not sure it would make much difference, but I'd be happy to attach an fla file—Adobe says it's a good idea but nowhere do they tell you how to attach an fla file... very peculiar, especially in these emphatic UI/UX times we live in.

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Oct 3, 2012 11:27 AM   in reply to montysM

    Not sure at all what flash player you ever saw an external FLV loop seamlessly on but it's been my vast overwhelming experience that it just cannot do that. Never has.

     

    The only way I ever got FLVs to loop seamlessly was placing them on the timeline. Otherwise there was always a studder when the playhead hit the end and seek(0)'d (same as just throwing it a new play() which is what your rewind() is doing).

     

    Depending on what you're doing you could try alternatives like StageVideo. It may handle the loop a bit better although I doubt it.

     

    Also, that delay is pretty big. Even back in the AS2 FLVPlayback days the delay was nowhere near what I'm seeing. You might want to consider adding in a AS cuepoint while trying to seek(0). I've never had that much loop delay.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 4, 2012 6:37 AM   in reply to montysM

    Code does take execution time.

     

    Make sure buffers are on your side. If the buffer is constantly cycling through buffering with a prebuffer delay, playing and finally flushing, that could cause your playback issue. That would cause the pause I'm seeing. Simply trace your netstreams onstatus events to see if the messages line up with the delay.

     

    On any modern CPU a seek should be instant and a cuepoint has almost zero overhead as well. Keep in mind cuepoints need to coincide with a keyframe. You can't seek to anything but a keyframe without a FMS. Your desire shouldn't make this an obstacle as obviously you desire to seek to frame 1 which is always a keyframe. However your cuepoint can fire off just short of the end of the video, never causing a COMPLETE event or buffer flush. That may be of some help.

     

    Seamless FLV looping is not a hard issue to find.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 4, 2012 12:13 PM   in reply to montysM

    My first suggestion was checking status events to locate the precise point it studders to investigate a solution.

     

    The second was another means of smoothing out the delay with a pre-fire playhead change invoked via a programatically added cuepoint near the duration of the clip.

     

    Why do "developers" like yourself who come to the forum for suggestions while both ignoring suggestions and berating other members attempts to help? Statements like that make it more difficult than it should be to assist you.

     

    If you continue to be an Adobe user, this won't be the last bug you'll need a workaround for, more will come. They call it work, or workaround, for a reason. Adobe had no intention of video looping being a bane of anyones existence.

     

    If you knew it was a known issue and can't find any solution to it, why did you come here just to complain about Flash Player? At least do it in the right forum.

     

    http://forums.adobe.com/community/flashplayer

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 5, 2012 5:43 AM   in reply to montysM

    No harm done. Wish I could have helped. A workaround at this point seems like your only alternative even if it is quite a bit of work.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 11, 2012 12:16 PM   in reply to montysM

    There's certainly nothing magical about FLVPlayback. Why not implement your own video player with Video / NetConnection / NetStream?

     

    You're more than welcome to extend the FLVPlayback class. Just do this:

     

    package

    {

        import fl.video.FLVPlayback;

     

        public class FLVPlaybackExtended extends FLVPlayback

        {

            public function FLVPlaybackExtended()

            {

                super();

            }

     

              // override what you like down here or add more code and properties

        }

    }

     

    FLVPlayback does not extend NetStream however, it extends the Sprite class and provides an easy wrapper around the VideoPlayer class. You'd have to be familiar with the insides to really get anything efficient done here.

     

    If you read the VideoPlayer documentation then you can see it has a property that gives you read-only access to both its NetStream and NetConnection.

     

    If you want to control the NetStream object you're better off just implementing it yourself. By the way, have you considered OSMF? It's built into Flash. Look at the org.osmf.* API (here's media).

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 15, 2012 6:50 AM   in reply to montysM

    The NetStream class linked above has lots of examples of playing a video using the underlying classes. It's extremely easy. The jist is, make a null NetConnection, attach the NetStream. Give the NetStream something to stream via a URLRequest. Attach a Video object to that stream, add the Video object to the stage and you shall see video.

     

    All the events you're used to having are pretty much there although some (like adding dynamic cuepoints) I believe are only for the FLVPlayback, you'll have to check. Generic events like the NetStream coming to a COMPLETE event will be there so you'd be hooking your loop up to that just the same.

     

    These classes are all for display. You'll have to invent your own controls and wire them into the NetStream class to pause/play/seek/etc. For your needs I don't think you need anything more than play/pause so that's why I suggested just making your own player.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 15, 2012 1:31 PM   in reply to montysM

    That's the bog I've been seeing since the beginning of time. I feel it's just a buffer flush and fill that takes a second. And yes I've built countless video players for a variety of reasons. Usually because my play controls were always custom so I had no real need for anything FLVPlayback could do.

     

    Play around with the buffer size. Do things like set the buffer size to the entire size of the video so it won't even start playing until the buffer is full and try to avoid a buffer empty. I'm not sure it's even possible but it's why I recommended using something like a cuepoint very close to the end of the video to hit and loop to avoid NetStream.Play.Stop altogether.

     

    Perhaps try uninstalling your Flash Player and install an older version (like 10) and see how it does. I think since FP8 (the last time I tried looping) you'll see the same bog you're getting right now:

    http://helpx.adobe.com/flash-player/kb/archived-flash-player-versions. html

     

    Lastly I haven't tried it myself but perhaps you should take a shot with StageVideo. The hardware decoding might be fast enough to handle the loop seamlessly and it's how all video will evolve anyhow.

    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fla sh/media/StageVideo.html

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 15, 2012 7:52 PM   in reply to montysM

    What type of play/looping response do you get from this short looping example?

    http://www.cidigitalmedia.com/tutorials/loop_vid/loop_vid.html

    This video uses

    ns.onStatus = function(info)....

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 16, 2012 3:35 AM   in reply to montysM

    Yeah what I was getting at was do you see a lag at the end of the video when it loops back. From what I understand is that lagging before loop back was your problem. So I'm assuming that what you want is a hard cut back to the beginning... no lag. That's what I was curious about.

    Looking at the cat video I don't think that what you are seeing as a lag has anything at all to do with the player. Rather, the video has a couple of frames at the very end that are exactly the same... making it look like the video is lagging before returning to the beginning of the time line.

    You can quickly test this theory by opening the video in an editing program or at least test in Flash by embedding in the main timeline and then scrub the timeline. The last couple frames are exactly the same and show no movement (making it look like the video has stopped). Also the last frame and the first frame to not match exactly, which you would need for a seemless loop. Notice the position of the cats eyes in relation to the tail in the first frame and then compare that to the position of the eyes in the last frame. Also notice the amount of red under the head in the first frame compared to the last. The head is not in the same position... so there is a slight jump as the vid loops back to the beginning.

    In my test I deleted the duplicate frames and eliminated the apparent lag at the end of the vid.. but of course could not do anything about the cats head positions not matching when it loops back to the beginning.

    Also testing your vid in Flash player 10 and 11 showed exact same results... an apparent lag before looping back to the beginning... which was really not a lag at all, just duplicate frames at the end of the video.

    Now I don't know if this was the only video that you are having problems with but it's my opinion that in the case of this particular video, the player was not at fault, rather it was the video itself.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 16, 2012 6:36 AM   in reply to montysM

    If you'd like to give me a sample looping video to save me a little time I'll test out StageVideo looping for you. I'm curious on it myself, I just lack the time to whip out AE a the moment. I don't want a FLV/F4V however, I'd need something as lightly compressed as possible so I can encode it to mp4/h.264. Believe me, mp4/h.264 is far, far better then FLV/F4V and it plays natively in HTML5 without flash at all. It's the correct path going forward.

     

    If you can't get me some loop source I can convert a FLV to MP4 but obviously the video rule follows, garbage in, garbage out. I can't guarantee the final keyframe will perfectly match the intro keyframe, but it's probably good enough to test.

     

    I do agree that this issue shouldn't exist. Though it does and I'm just trying to move you forward through the problem. That may require some work.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 16, 2012 2:10 PM   in reply to montysM

    Well my observation on the cat video is just as I stated above, plays back the same in Flash player 10 and 11.

    Then downloaded the video file itself and examined in video editor first... that's where it seemed to have duplicate frames at the end. The opened Flash and embeded the video file directly into the timeline... sure enough, there were duplicate frames at the very end.... which made it look like the jump from last to first frame was lagging when actually it was just playing the duplicate frame. Eliminated that extra frame and it looped just fine.

    Very simple and easy to test for yourself, just embed the vid file into the timeline and scrubb... last couple frames are duplicates. Did you test that?

    Now of course that has nothing to do with other files but that's what I see wrong with the cat file. Would be interested in looking at another video/ example of lag if possible.

    Best wishes,

    Adninjastrtor

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 17, 2012 8:26 AM   in reply to montysM

    I can confirm there's no duplicated frames in montysM's cat video. I tried the StageVideo approach and unfortunately being it still uses the NetConnection and NetStream classes, the looping lag still exists. I tried a few different codecs and codec settings, all acted identical. Actually it also blinks unless you pause() and resume() the object instead of just seek()ing. So that's not a solution either.

     

    OSMF deserves a try.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 18, 2012 7:16 AM   in reply to montysM

    Testing your cat vid link in IE, FF, and Safari, the vid plays pretty well, except for the duplicate frame at the end. Those browsers had various older versions of Flash pluggin installed. Using Chrome, with a 11.4.31..... version of the Flash player, there is a very pronounced lag at the end of the video before looping back to the beginning.

    Testing this link in that same browser/player:

    www.cidigitalmedia.com/tutorials/loop_vid/loop_vid.html

    shows a hard loop from the end of video back to a few seconds into the video... seek set to 20.

    This is the AS2 used:

    /* Video player created by CI Digital Media for educational purposes */
    stop();
    var nc:NetConnection = new NetConnection();
    nc.connect(null);

    var ns:NetStream = new NetStream(nc);
    video_screen.attachVideo(ns);
    /* Name of your video, with correct path, goes here */
    ns.play("loop_vid.flv");

    ns.onStatus = function(info) {
      if(info.code == "NetStream.Play.Stop") {
      trace("Video complete")
        ns.seek(20);
      }
    }
    //-------Sound Controls--------//
    this.createEmptyMovieClip("sound_mc",this.getNextHighestDepth());
    sound_mc.attachAudio(ns);

    var videoSound:Sound = new Sound(sound_mc);

    mute_btn.onRelease = function() {
    if (videoSound.getVolume() > 0) {
      videoSound.setVolume(0);     
      }
      else
      {
       videoSound.setVolume(100);
      }
    }

    So it does look like there is a real problem with the latest version of Flash player browser pluggin and the AS3 code you are using. You might want to try the older AS2 version and see what effect that has.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 18, 2012 8:44 AM   in reply to adninjastrator

    AVM1 (AS2) and AVM2 (AS3) are totally different engines. You can't expect anything between them to work identically (thankfully), AVM2 and AS3 are far superior in uncountable ways. I would highly recommend staying the course in AS3, finding a bug report of this looping playback issue and posting that link here. I'll happily vote it up. The more votes it gets the faster it will get fixed.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 18, 2012 11:15 AM   in reply to montysM

    You're welcome and here's a link to the bugbase:

     

    https://bugbase.adobe.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2012 5:53 AM   in reply to montysM

    Hey folks!

     

    I finally found a workaround for this issue after some time of trying... Simply embed a Cuepoint to the very end of the FLV and listen to that instead of the EndOfStream- / Complete-Event.

    (Unfortunately you cannot use "addASCuePoint" (or a similar method) with the netstream object)

     

    Here is the Code:

    var customClient : Object = new Object();

     

    customClient.onCuePoint = function(infoObject : Object):void {

         trace("Found CuePoint. Resetting video to start...")

         ns.seek(0);

         ns.play();

    };

     

    ns.client = customClient;

     

    Works fine for me. I hope this is helpful for you!

     

    Best wishes!

     

    Message was edited by: caa_sion

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2012 11:17 AM   in reply to caa_sion

    Didn't work for me, in fact there's just some really weird cuePoint action going on in my testing.

     

    I made a really ugly 3.0 second long video and made 2 FLVs from it. One with an embedded cue point at 3.0 seconds like you mentioned and the other has no cue points. I'm rotating a circle colored via the standard rainbow gradient so loop studders would be more obvious. I'm also moving a line up and down the screen with no easing as that's another thing that's easy to see loops failing on.

     

    I tested the 3 methods, using the traditional STOP event, using an embedded cue like mentioned and also using FLVPlayback to insert a cuepoint. When testing locally I'm not having any issue continuously (and quickly) looping using all 3 methods. Most notably (actually) the STOP and FLVPlayback method are the smoothest.

     

    However when I upload and test it in a browser it stops working. Perhaps because I have FP debuggers installed in my browser.

     

    What I see is the original STOP method continuously loops but you get that 1 second lag between loops (as we knew).

     

    When I embed a cue point and try to loop on that I'm getting a video that is hitting the cue point early (like 1 second) instead of where the cue is placed.

     

    The FLVPlayback AS3 cue point works well for the first loop but on every second loop it has a delay.

     

    I have a limitedly useful TextField just giving information like when a cue is hit, what the .time property is. It's useful to see the embedded cue is set at 2.999etc but is firing off completely wrong.

     

    Live example:

    http://www.ertp.com/tmp/vidlooptest/ (FP11.5 needed)

     

    Click any button to try that test. When a different button is called I clean up and then start again. I don't believe I missed any cleaning up so the results should be accurate.

     

    CS5.5 FLA Source w/ vids:

    http://www.ertp.com/tmp/vidlooptest/VideoLoopTest.zip

     

    Here's just the frame script for reference:

    http://pastebin.com/tdetapJz

     

    It's a pretty simple, straight forward test. Any code blunders in there?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 17, 2012 4:08 AM   in reply to sinious

    I have to admit that I was a little hasty with my comment. Sorry.

     

    Thanks for uploading your example sinious! I did not find any blunders after the first look.

    I hope I find time to take a closer look at it today.

     

    In fact the looping with an embeded CuePoint works only sometimes. It seems to be the "NetStream.Seek.Complete"-Event that cause the problems.

     

    My sequence:

    1. The CuePoint fires accurate in time
    2. Seeking to start
    3. Here is the delay of about 1 Second
    4. Then  the "NetStream.Seek.Complete"-Event fires
    5. The video plays again

     

    Can you reproduce that too?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 17, 2012 7:22 AM   in reply to caa_sion

    I don't see the NetStream.Seek.Complete event at all. I see a NetStream.Seek.Notify as soon as the cue hits but no "Complete" event. I don't even see that event in documentation:

     

    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fla sh/events/NetStatusEvent.html#info

     

    I did a quick search on it and found one post asking what that event was because they got it and they couldn't find documentation on it. Oh the fun .

     

    Show me your event handler code.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 18, 2012 3:26 AM   in reply to sinious

    I am wondering too, now that you mentioned it

     

    Here´s my EventHandler-Code:

    unit.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

    private function netStatusHandler(event:NetStatusEvent):void {

        switch (event.info.code) {

            case "NetConnection.Connect.Success":

                break;

            case "NetStream.Play.Start":

                if(!inited) {

                    inited = true;

                    NetStreamWrapper(unit.Stream).path = path;

               

                    width = video.videoWidth;

                    height = video.videoHeight;

                   

                    log.info(Path+": Size of video: "+video.videoWidth+" "+video.videoHeight);

                   

                    CalculateMemory();

                }

                break;

            case "NetStream.Buffer.Full":

                if (!initializedStream) {

                    log.info(Path+": Pausing and rewinding stream: "+unit.Stream.time);

                    log.info(Path+": Size of video: "+video.videoWidth+" "+video.videoHeight);

     

                    unit.Stream.pause();

                    //NetStreamWrapper(unit.Stream).initialized = false;

                    initializedStream = true;

                   

                    if(unit.Stream.bytesLoaded == unit.Stream.bytesTotal) {

                        SetCurrentPreparationLevel(CommittedDesiredPreparationLevel);

                    }

                }

                break;

            case "NetStream.Seek.Notify":

                break;

            case "NetStream.Play.Stop":

                if(initializedStream) {

                    dispatchEvent(new AssetEvent(END_OF_STREAM, this));

                }

               

                break;

            case "NetStream.Play.StreamNotFound":

                RaiseError("File for stream not found", event);

                break;

            case "NetStream.Seek.InvalidTime":

                log.warn("Illegal seek(should not happen, but more or less harmless)");

                break;

            case "NetStream.Seek.Complete":

                log.warn("Finished seeking");

                break;

            default:

                if(event.info.level == "error")

                    RaiseError(event.info.code, event);

                break;

        }

    }


     
    |
    Mark as:
  • Currently Being Moderated
    Dec 18, 2012 10:37 AM   in reply to caa_sion

    I don't use NetStream, I use the FLVPlayback component, which does exactly what we need, and we're able to loop the video; well, I guess it doesn't really loop, it's stops itself, listens for the COMPLETE event, and then reloads itself when completed. It's as close as we need to get when it comes to looping.

     

    function loadVideo(videoSource:String, videoName:String):void

    {   

        video.source = videoSource;

        trace("video.source = "+ video.source);

        video.addEventListener(VideoEvent.COMPLETE, videoComplete);

        video.name = "video";

        video.play();

        addChild(video);       

    }

     

    function videoComplete(e:VideoEvent):void

    {   

        var videoObj:DisplayObject = MovieClip(root).getChildByName("video");       

        if(videoObj != null)

        {

            removeChild(videoObj);   

        }           

        loadVideo(vidoeSource, "video");

    }

     

     

     

    Not what you're looking for, and probably doesn't offer much insight, just thought maybe it would help someone.

     

    Cheers,

    ~Chipleh

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 18, 2012 12:02 PM   in reply to caa_sion

    caa_sion~ Weird, I don't get that event at all, but I'm using a tiny 3 second loop. I even played with bufferTime set to 0.01, inBufferSeek, etc and I never get the event (or the loop to be seamless). I'm pretty sure it's just because I use a tiny 3 second video but who would want to wait 1 minute to verify a loop is working .

     

    If it's not documented I'd be weary of it (depreciated at some point?).

     

    Chipleh~ They're trying to achieve flawless looping. Unloading and reloading the whole video won't do that, it'd loop even worse.

     

    You also do use NetStream (FLVPlayback uses it under the hood).

     

    Overall I'm starting to wonder if some binary technique of attaching a byteArray streamed via something besides netStream (like FileStream) and attaching to that might be possible. I haven't even lifted a finger to test it but as for now, we're up the creek.

     

    Timeline embedded video plays flawlessly when looping, for what it's worth . That was my "old days" solution to this issue I always had.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 21, 2013 12:44 AM   in reply to sinious

    Hello again

    The previous Bug-Report was closed. So I created a new one.

     

    https://bugbase.adobe.com/index.cfm?event=bug&id=3474727

     

    Now they ask for more Information.

    Sinious~ Due my duty of secrecy I cannot send them my original Code (It is pretty geared with stuff I'am not allowed to publish).

     

    Am I allowed to send them your Source Code?

     


     
    |
    Mark as:
  • Currently Being Moderated
    Jan 21, 2013 5:38 AM   in reply to caa_sion

    Yes of course. It was created as a simple, provable and reusable bug example. Feel free!

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 21, 2013 8:05 AM   in reply to sinious

    Thanks. I've attached your code to the bugreport.

     

    Nothing else remains to be done. Stay tuned

     
    |
    Mark as:
1 2 Previous Next
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points