progress property
Gets the current progress of the element timeline.
Syntax
| JScript |
|---|
|
Property values
Type: Integer
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.
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.
Examples
The following example shows how to display the progress of the timeline as a percent.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/progress.htm
<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:
<BUTTON ID="playBtn" onclick="movie.beginElement();">Play
</BUTTON>
<BUTTON ID="stopBtn" onclick="movie.endElement();
txSeq.endElement();">Stop</BUTTON>
<BUTTON ID="pauseBtn" onclick="movie.pauseElement();
txSeq.pauseElement();">Pause</BUTTON>
<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>
</TD>
</TR>
</TABLE>
</SPAN>
</BLOCKQUOTE>
</BODY>
</HTML>