Skip to main content
hartz
Inspiring
February 14, 2019
Answered

Elapsed time showing on scrub bar?

  • February 14, 2019
  • 1 reply
  • 696 views

Is there a way to show elapsed time on a component scrub bar (similar to the way VLC or Windows Media).  I have a video that is linked and played through a component.  There are several "skins" available, but none that I can find offer to read elapsed time.  Is there code that can be applied to a component?  If so, can you explain how to do that and what the code is?

    This topic has been closed for replies.
    Correct answer kdmemory

    Paul

    you actually can. For me it's almost a decade ago that I did something like that with AS3 and don't remember all the details. But the rough line how to go about this is still memorized.

    In the components panel in Animate below Video you find all single bits that make the FLVPlayback controls. PlayButton, PauseButton, PlayPauseButton, SeekBar and so on. You can create a movieclip and in it assemble all components you want in your user-defined video controls. Of course you have to connect the wires to the interfaces, so to speak. Like this:

    flvcomp.playPauseButton = videoCtrl.ppvid;

    flvcomp.muteButton = videoCtrl.mutevid;

    flvcomp.seekBar = videoCtrl.seekvid;

    Whereby videoCtrl would be the linkage name (in the library) you've given the movieclip containing the FLVPlayback controls. ppvid, mutevid and seekvid would be the instance names you've given the component instances in the videoCtrl movieclip.

    flvcomp would be the name under which you created the FLVPlayback component like:

    var flvcomp:FLVPlayback = new FLVPlayback();

    Well all those names were my choice when I created a user-defined FLVPlayback component for a particular app almost 9 years ago. You can choose names that suits you. The all important AS3 API for the component is to be found here: FLVPlayback - Adobe ActionScript® 3 (AS3 Flash) API Reference

    Now the display for elapsed Time, there is no readymade component avail. But you can just create a dynamic textfield for it, place it too in your videoCtrl movieclip and instance-name it accordingly (Let's say ptime) and make it font-size-wise as large as you like. Creative Freedom. And then with some tricky bits of AS3 you can fill in the elapsed time. I give you as an orientation what I did back in 2010 (still works).

    function updatePlayTime():void {

        phSec = Math.floor(flvcomp.playheadTime);

        phMin = Math.floor(phSec/60);

        phSec2 = phSec - (phMin * 60);

        if (phSec2 < 10) {

            phSecStr = "0" + String(phSec2);

        } else {

            phSecStr = String(phSec2);

        }

        if (phMin < 10) {

            phMinStr = "0" + String(phMin);

        } else {

            phMinStr = String(phMin);

        }

        videoCtrl.ptime.text = phMinStr + ":" + phSecStr + " / " + flvDurationStr;

        var playProgress:int = Math.floor((videoCtrl.seekvid.progress_mc.width / 100) * flvcomp.playheadPercentage);

        if (playProgress <= videoCtrl.seekvid.progress_mc.width) {

            videoCtrl.seekvid.phprogress.width = playProgress;

        }

    }

    You have to develop it yourself, this is only a guideline.

    Klaus

    1 reply

    kdmemory
    Inspiring
    February 14, 2019

    Hi Paul

    Are you targetting AS3 or HTML5 Canvas?

    Klaus

    hartz
    hartzAuthor
    Inspiring
    February 14, 2019

    AS3, I found the skin that has the counter, but it’s so laggy. And I cannot find how to edit those skins. If I could actually make it bigger I might be able to see it.

    kdmemory
    kdmemoryCorrect answer
    Inspiring
    February 14, 2019

    Paul

    you actually can. For me it's almost a decade ago that I did something like that with AS3 and don't remember all the details. But the rough line how to go about this is still memorized.

    In the components panel in Animate below Video you find all single bits that make the FLVPlayback controls. PlayButton, PauseButton, PlayPauseButton, SeekBar and so on. You can create a movieclip and in it assemble all components you want in your user-defined video controls. Of course you have to connect the wires to the interfaces, so to speak. Like this:

    flvcomp.playPauseButton = videoCtrl.ppvid;

    flvcomp.muteButton = videoCtrl.mutevid;

    flvcomp.seekBar = videoCtrl.seekvid;

    Whereby videoCtrl would be the linkage name (in the library) you've given the movieclip containing the FLVPlayback controls. ppvid, mutevid and seekvid would be the instance names you've given the component instances in the videoCtrl movieclip.

    flvcomp would be the name under which you created the FLVPlayback component like:

    var flvcomp:FLVPlayback = new FLVPlayback();

    Well all those names were my choice when I created a user-defined FLVPlayback component for a particular app almost 9 years ago. You can choose names that suits you. The all important AS3 API for the component is to be found here: FLVPlayback - Adobe ActionScript® 3 (AS3 Flash) API Reference

    Now the display for elapsed Time, there is no readymade component avail. But you can just create a dynamic textfield for it, place it too in your videoCtrl movieclip and instance-name it accordingly (Let's say ptime) and make it font-size-wise as large as you like. Creative Freedom. And then with some tricky bits of AS3 you can fill in the elapsed time. I give you as an orientation what I did back in 2010 (still works).

    function updatePlayTime():void {

        phSec = Math.floor(flvcomp.playheadTime);

        phMin = Math.floor(phSec/60);

        phSec2 = phSec - (phMin * 60);

        if (phSec2 < 10) {

            phSecStr = "0" + String(phSec2);

        } else {

            phSecStr = String(phSec2);

        }

        if (phMin < 10) {

            phMinStr = "0" + String(phMin);

        } else {

            phMinStr = String(phMin);

        }

        videoCtrl.ptime.text = phMinStr + ":" + phSecStr + " / " + flvDurationStr;

        var playProgress:int = Math.floor((videoCtrl.seekvid.progress_mc.width / 100) * flvcomp.playheadPercentage);

        if (playProgress <= videoCtrl.seekvid.progress_mc.width) {

            videoCtrl.seekvid.phprogress.width = playProgress;

        }

    }

    You have to develop it yourself, this is only a guideline.

    Klaus