progress Property (currTimeState)

HTML (DHTML)

previous page next page

progress Property

Retrieves the current progress of the element's timeline.

Syntax

[ fProgress = ] currTimeState.progress

Possible Values

fProgress Floating-point that receives the current progress along the element's timeline, as 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's timeline. If the autoReverse property is set to true, then progress begins decrementing from 1 until it reaches 0, or the end of the timeline.

Example

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

<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="../../common/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>

This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is a Microsoft extension to Synchronized Multimedia Integration Language (SMIL) .

Applies To

currTimeState