progress Property

Article
09/04/2012

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

Gets the current progress of the element timeline.

Syntax

[ fProgress = ] currTimeState.progress

Possible Values

fProgress A floating-point that receives the current progress along the element timeline, compared to the element's simpleDur property. Valid values for this property are in the range between 0.0 and 1.0.

The property is read-only. The property has no default value.

Remarks

The value of this property is continuously updated for the duration of the element timeline. If the autoReverse property is set to true, then progress begins decrementing from one until it reaches zero, or the end of the timeline.

Example

The following example shows how to display the progress of the timeline as a percent.

<HTML>
<HEAD>
<TITLE>progress Property</TITLE>
    
<SCRIPT LANGUAGE="JScript">
// Update the SPAN container with the progress value
function update() {     
    var pro = movie.currTimeState.progress;
    var sPro = pro.toString();    // convert to a string
    if (movie.currTimeState.stateString != "holding") {
        if (pro != 0) {    
            if (sPro.substr(2,1) == "0") {
                sPro = sPro.substr(3,1);  // single digit (1-9)
            }
            else {
                sPro = sPro.substr(2,2);  // double digit (10-99)
            }
        }
        else {
            sPro = "0";
        }
    }
    else {
        sPro = "100";        // Timestate is holding at the end
    }
    progressText.innerText = sPro + "%";    // Set the span
}

// Update each button based on the current timeline state
function updateBtns() {        
    switch (movie.currTimeState.stateString) {
        case "active":
            if (movie.currTimeState.isPaused == true) {
                playBtn.disabled = true;
                stopBtn.disabled = false;
                pauseBtn.disabled = true;
                resumeBtn.disabled = false;
            }
            else {        
                playBtn.disabled = true;
                stopBtn.disabled = false;
                pauseBtn.disabled = false;
                resumeBtn.disabled = true;
            }
            break;
        case "inactive":
            playBtn.disabled = false;
            stopBtn.disabled = true;
            pauseBtn.disabled = true;
            resumeBtn.disabled = true;
            break;
        case "holding":
            playBtn.disabled = false;
            stopBtn.disabled = true;
            pauseBtn.disabled = true;
            resumeBtn.disabled = true;
            break;                        
    }
}
</SCRIPT>
<SCRIPT FOR="document" EVENT="onclick" LANGUAGE="JScript">
    updateBtns();
</SCRIPT>
<STYLE>
    .time{ behavior: url(#default#time2);}
    BODY{font-size: 12pt;}
</STYLE>
<XML:NAMESPACE PREFIX="t"/>
</HEAD>

<BODY ID="docBody" TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED"
    BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#808080" ALINK="#000000"
    onload="update(); updateBtns();">

<BLOCKQUOTE CLASS="body">
<!-- Timer for refreshing the displayed progress -->
<SPAN ID="timer" CLASS="time" BEGIN="movie.begin" DUR=".25" 
REPEATCOUNT="indefinite" onrepeat="update();" FILL="FREEZE">
</SPAN>
<!-- Container to display current progress -->
<SPAN STYLE="color:#FFFFFF; background-color:#000000; 
position:relative; top:70px; left:240px; padding:2;">Progress: 
    <SPAN STYLE="font-family:courier; font-weight:bold;
        color:#FFFFFF;" ID="progressText">0%</SPAN>
</SPAN>

<TABLE  CELLSPACING="5" STYLE="background-color:#EEEEEE;" 
ID="proSpan">
    <TR>
        <TD STYLE="background-color:Silver; padding:5;">
            <SPAN>Video Controls:&nbsp;
            <BUTTON ID="playBtn" onclick="movie.beginElement();">Play
            </BUTTON>&nbsp;
            <BUTTON ID="stopBtn" onclick="movie.endElement();
                txSeq.endElement();">Stop</BUTTON>&nbsp;
            <BUTTON ID="pauseBtn" onclick="movie.pauseElement();
                txSeq.pauseElement();">Pause</BUTTON>&nbsp;
            <BUTTON ID="resumeBtn" onclick="movie.resumeElement();
                txSeq.resumeElement();">Resume</BUTTON></SPAN>
        </TD>
    </TR>
    <TR>
        <TD>
            <t:VIDEO CLASS="time" ID="movie"
                SRC="/workshop/samples/author/behaviors/media/movie.avi"
                BEGIN="indefinite" FILL="FREEZE" onend="updateBtns();
                update();"/>
        </TD>
    </TR>
    <TR>
        <TD ID="caption" STYLE="background-color:Silver;"
        ALIGN="CENTER">
            <t:SEQ ID="txSeq" CLASS="time" BEGIN="movie.begin+.5">
                <SPAN ID="ten" CLASS="time" DUR="1">Ten</SPAN>
                <SPAN ID="go" CLASS="time" DUR="2">We're go for
                    main engine start</SPAN>
                <SPAN ID="seven" CLASS="time" DUR="1">7</SPAN>
                <SPAN ID="six" CLASS="time" DUR="1">6</SPAN>
                <SPAN ID="start" CLASS="time" BEGIN="1" DUR="1">
                    Start</SPAN>
                <SPAN ID="three" CLASS="time" DUR="1">3</SPAN>
                <SPAN ID="two" CLASS="time" DUR="1">2</SPAN>
                <SPAN ID="one" CLASS="time" DUR="1">1</SPAN>
                <SPAN ID="zero" CLASS="time" DUR="1">0</SPAN>
                <SPAN ID="liftoff" CLASS="time" DUR="2">
                    and lift off!</SPAN>
                <SPAN ID="liftoff2" CLASS="time" DUR="1.75">
                    Lift off, Americans return to space</SPAN>
                <SPAN ID="liftoff2" CLASS="time" DUR="2">
                    as Discovery clears the tower.</SPAN>
                <SPAN ID="last" CLASS="time" BEGIN="1" DUR="3">
                    Roger all, Discovery.</SPAN>    
            </t:SEQ>&nbsp;
        </TD>
    </TR>
</TABLE>
</SPAN>    
</BLOCKQUOTE>
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/progress.htm

Applies To

currTimeState

See Also

Introduction to HTML+TIME

progress Property

Additional resources