dcsimg
A Flash Developer Resource Site

Results 1 to 11 of 11

Thread: How to created preloader for streaming *flv video?

Hybrid View

  1. #1
    Junior Member
    Join Date
    Sep 2010
    Posts
    6

    Question How to created preloader for streaming *flv video?

    Hi All,
    Does anybody know any tutorial for creating flash preloader for streaming video? I have found on the Interent many but for heavy pics not for bringing video files into fla file, and this ones don't work for the videos :/
    cheers

  2. #2
    Senior Member
    Join Date
    Sep 2010
    Posts
    324
    Are you actually using true "streaming" video or is it really just being progressively downloaded?
    The reason being, with true streaming, there is not really a "total bytes" amount, like you would see with a regular flv file.
    Video Man

  3. #3
    Junior Member
    Join Date
    Sep 2010
    Posts
    6

    How to modify the Action Script 2?

    You are right, I mean progressively downloaded video. I have found tutorial here,

    http://www.bloommedia.co.uk/blog/tec...onscript-20-2/

    this is the case when video is outside of *fla file, but linked. How can I modify the Action Script to redirect my page onStop after video stops playing ones? I can not use getURL on the last keyframe, because video is located outside of fla file, Instead of looping I want it to go to different page, I can remove looping only from the code but I can't create code to getURL in this case, does anybody know how it should look? :/
    cheers

  4. #4
    Senior Member
    Join Date
    Sep 2010
    Posts
    324
    Not sure if you are using the flv playback component or netstream, but I'd recommend you learn to use netstream for your video player. It's a more pwerful and versatile.
    For example, here is how you would handle the getURL problem:
    Code:
    ns.onStatus = function(info) {
    		if(info.code == "NetStream.Play.Stop") {
    		trace("Video complete")
      		ns.seek(60);
    //		ns.play();
    		ns.pause();
    //		gotoAndStop("end");
    		getURL("http://www.cidigitalmedia.com/video.html", "_blank");
    		}
    	}
    so reading thru it:
    when NetStream stops, it will trace "Video complete"
    then seek to 60 seconds into the video and pause.
    It could seek to any point in the video so you aren't left with a black screen after the video is complete. Then you could play the video from that point (say... 60 seconds) or simple pause the video there, you'll see play is commented out, but leaves me that option.
    Then I could have the video jump to any named frame in the main timeline and play something from the main timeline (commented out for now) OR do a get URL.
    So what is does when the video finishes is seeks to 60 seconds, pauses the video, then opens a web page in a new window.
    Maybe you can adapt some of this for your project.
    Video Man

  5. #5
    Junior Member
    Join Date
    Sep 2010
    Posts
    6
    Hi Video Man,
    thanks very much for that code but I am doing probably something wrong, because there is no redirection working... My video is just the intro for the website of my Polish village. You can preview working version here (don’t mind the bad quality of logo for now), this is direct link to *swf:
    http://www.wirtualnerogi.pl/intro_17sept.swf
    After intro stops playing (takes exactly 17 seconds) I want to redirect the page with no break to address: http:www.wirtualnerogi.pl (Finally my intro will be nested in index.html file of corse), but redirection doesn’t work. My code looks this way now:

    // open a net connection
    var nc:NetConnection = new NetConnection();
    // null connection for progressive download
    nc.connect(null);

    // create a stream
    myNetStream = new NetStream(nc);
    myVideo.attachVideo(myNetStream);
    // load video
    myNetStream.play("intro.flv");
    // pause video to hide it from the stage
    myNetStream.pause();

    // hide load progress
    percentage._visible = false;
    percentage._visible = false;

    // resize video onload, based on meta data
    myNetStream.onMetaData = function(obj)
    {
    myVideo._height = obj.height;
    myVideo._width = obj.width;
    // show load progress
    percentage._visible = true;
    percentage._visible = true;
    };

    ns.onStatus = function(info) {
    if(info.code == "NetStream.Play.Stop") {
    trace("Video complete")
    ns.seek(17);
    // ns.play();
    ns.pause();
    // gotoAndStop("end");
    getURL("http://www.wirtualnerogi.pl", "_self");
    }
    }

    // create a preload interval to check load progress every 1 millisecond
    myInterval = setInterval(checkBytesLoaded, 1, myNetStream);

    // preload loop progress
    function checkBytesLoaded(mns)
    {
    // calculate percentage of video that has downloaded
    pctLoaded = Math.round(mns.bytesLoaded / mns.bytesTotal * 100);

    // update textfield on the stage
    percentage.text = "Załadowano" + " " + pctLoaded + "%";

    // update progress bar on the stage
    progressBar._yscale = pctLoaded;

    if (pctLoaded >= 100) {
    // the video has fully downloaded

    _root.progressBar._visible = false;
    _root.logo._visible = false;
    percentage._visible = false;

    // play video from the beginning
    mns.seek(0);
    mns.play("intro.flv");
    // clear interval
    clearInterval(myInterval);
    }

    }

    Maybe better would be just to place my *flv video directly in *fla file together with preloader, and then to place getURL in the last frame of the timeline, but I wouldn’t be able to modify the code consequently to have the relative paths/links to video in code - if video is located inside of *fla file instead of the same directory as originally.
    What am I doing wrong?
    Sorry for my English,
    Piotr

  6. #6
    Senior Member
    Join Date
    Sep 2010
    Posts
    324
    We are just using different names for our netstreams
    yours:
    Code:
    myVideo.attachVideo(myNetStream);
    mine:
    Code:
    video_screen.attachVideo(ns);
    so in the code I posted above, where ever you see ns, change that to your name, for example:

    Code:
    ns.onStatus = function(info) {
    change to
    Code:
    myNetStream.onStatus = function(info) {
    and so on down the code.
    Give that a try, I think you'll see the difference
    Video Man

  7. #7
    Junior Member
    Join Date
    Sep 2010
    Posts
    6

    Thanks :)

    You helped me much Video Man, God bless you! I will have to learn all this things, Action Script is a powerfull tool
    It works now fine in Mozilla:

    http://www.wirtualnerogi.pl/

    But for some reasons preloader disappears in IE and Google chrome and html link skip/pomin intro becomes unactive, I will have to check what causes this problems with these two browsers.
    cheers,
    Piotr

  8. #8
    Senior Member
    Join Date
    Sep 2010
    Posts
    324
    Glad you are making progress. Good for you!!
    But I checked out the link and it seems like it takes FOREVER for the intro video to download. So I took a look at the bitrate and it's 1500kbps....!!! Now that's a very high bitrate!
    So I can see why you might want to use a preloader to download the entire file before you play it, but the wait is not good. Maybe you have a super fast download connection but I have a 6Mb connection and it still took too long for an intro.
    The idea of using progressive downloading to serve up .flvs is that so the video can start to play and the viewer doesn't have to wait for the entire video to download. Using a pre-loader makes the viewer wait until the entire video is downloaded... it defeats the whole purpose of using progressive downloading. It takes awhile to download all that 3.2MB video file. It's especially annoying when it's the intro, the doorway to your site. If I get bored waiting for the download, I leave, without ever seeing your site.
    My advice for the intro... cut the bitrate way down and drop the preloader, use progressive downloading so I can see something happening quickly.
    However, if you decide not to go that route, then I'd suggest you create a simple but interesting preloader graphic to amuse the viewer while they wait. Anything except the percent figure... that's so boring.
    One of the car companies had small parts of a car appear on the screen to represent percentages. Even a logo which fills up is better than just showing the percent, like this simple preloader:
    http://www.uncledoodad.com/07_25_09/07_25_09.html
    Not trying to knock your work... just trying to help you produce the very best product you can.
    Video Man

  9. #9
    Junior Member
    Join Date
    Sep 2010
    Posts
    6

    The bit rate

    Hi Video Man,
    thanks for next hints. I reduced the video bit rate. The file size is now 1.5MB, hope that visually is still acceptable, I can't compress it more. My preloader is oldfashioned as the subject of my website, I think at this tage I am going to keep it
    Thanks very much for all advices,
    cheers,
    Piotr

  10. #10
    Member
    Join Date
    Apr 2009
    Posts
    45
    You just choose preloaders yourself with desktop software.Then All of these choices will make your video different from others, so as to make your presentation video more suitable to your demand. If you want a try, You may take a look at this step by step guide, http://www.flash-video-soft.com/blog/?p=220

  11. #11
    Senior Member
    Join Date
    Sep 2010
    Posts
    324
    Don't you just hate the spamming from posts like that?
    If they know so much, let them answer the post WITHOUT pointing to software they are selling.
    Video Man

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center