Skip to content

Commit bd2b704

Browse files
birtlessvgeesus
birtles
authored and
svgeesus
committed
Add play states
1 parent 1bd8a13 commit bd2b704

1 file changed

Lines changed: 106 additions & 25 deletions

File tree

‎web-animations/index.html‎

Lines changed: 106 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -791,8 +791,8 @@ <h3>The current ready promise</h3>
791791
</p>
792792
<p>
793793
The object is replaced with a new Promise object every time the player
794-
enters the <a title="play state pending">pending</a> state as well as
795-
when the player is cancelled (see <a href="#cancelling-a-player"
794+
enters the <a>pending play state</a> as well as when the player is
795+
cancelled (see <a href="#cancelling-a-player"
796796
class="sectionRef"></a>).
797797
</p>
798798
<div class="note">
@@ -803,12 +803,12 @@ <h3>The current ready promise</h3>
803803
</p>
804804
<p>
805805
For example, in the following code fragment, the state of the player
806-
will be <a title="play state playing">playing</a> when the
806+
will be <a title="playing play state">playing</a> when the
807807
<a>current ready promise</a> is resolved.
808-
This is because the player does not leave the <a
809-
title="play state pending">pending</a> state in between the calls to
810-
<code>pause</code> and <code>play</code> and hence the <a>current
811-
ready promise</a> does not change.
808+
This is because the player does not leave the <a>pending play
809+
state</a> in between the calls to <code>pause</code> and
810+
<code>play</code> and hence the <a>current ready promise</a> does
811+
not change.
812812
</p>
813813
<pre class='example sh_javascript'>
814814
player.pause();
@@ -924,8 +924,7 @@ <h3>Playing a player</h3>
924924
A user agent MAY execute the above task immediately (if it
925925
determines the <a>source content</a> is immediately
926926
<a>ready</a>) thereby
927-
bypassing the <a title="play state pending">pending</a> state
928-
altogether.
927+
bypassing the <a>pending play state</a> altogether.
929928
</p>
930929
<li>Run the procedure to <a>update a player's finished state</a>
931930
for <var>player</var>.
@@ -1080,7 +1079,7 @@ <h3>The current finished promise</h3>
10801079
</p>
10811080
<p>
10821081
The object is replaced with a new Promise object every time the player
1083-
leaves the <a title="play state finished">finished</a> state.
1082+
leaves the <a>finished play state</a>.
10841083
</p>
10851084
</section>
10861085
<section>
@@ -1103,8 +1102,8 @@ <h3>Updating the finished state</h3>
11031102
</p>
11041103
<p>
11051104
A player that has reached this boundary (or overshot it) and whose
1106-
<a>pause flag</a> is false is said to be <a title="play state
1107-
finished">finished</a>.
1105+
<a>pause flag</a> is false is said to be <a
1106+
title="finished play state">finished</a>.
11081107
</p>
11091108
<p>
11101109
The crossing of this boundary is checked on each modification to the
@@ -1193,8 +1192,7 @@ <h3>Finishing a player</h3>
11931192
<li>Set <var>player</var>'s <a>pause flag</a> to false.
11941193
<p class="annotation">
11951194
This is needed so that <var>player</var> ends up in the
1196-
<a title="play state finished">finished</a> play state, not the
1197-
<a title="play state paused">paused</a> play state.
1195+
<a>finished play state</a>, not the <a>paused play state</a>.
11981196
</p>
11991197
<li>If there is a <a>pending play task</a>, cancel that task and
12001198
fulfill the <a>current ready promise</a> of <var>player</var> with
@@ -1269,8 +1267,7 @@ <h3>Speed control</h3>
12691267
<p>
12701268
Setting a player's <a title="player playback rate">playback rate</a>
12711269
to zero effectively pauses the player (however, the <a>play state</a>
1272-
is does not necessarily become <a title="play state
1273-
paused">paused</a>).
1270+
does not necessarily become <a title="paused play state">paused</a>).
12741271
</p>
12751272
<section>
12761273
<h4>Updating the playback rate of a player</h4>
@@ -1326,11 +1323,86 @@ <h3>Reversing a player</h3>
13261323
This must be done silently or else we may end up fulfilling
13271324
the <a>current ready promise</a> when we do the compensatory
13281325
seek despite the fact that we are most likely not exiting the
1329-
<a title="play state pending">pending</a> state.
1326+
<a>pending play state</a>.
13301327
</p>
13311328
<li>Run the steps to <a>play a player</a> for <var>player</var>.
13321329
</ol>
13331330
</section>
1331+
<section>
1332+
<h3>Player state</h3>
1333+
<p>
1334+
A <a>player</a> may be described as being in one of the following
1335+
<dfn title="play state">play states</dfn>:
1336+
</p>
1337+
<dl>
1338+
<dt><dfn title="idle play state">idle</dfn></dt>
1339+
<dd>The <a>current time</a> of the player is <a>unresolved</a> and
1340+
there are no pending tasks.
1341+
In this state the player has no effect.</dd>
1342+
<dt><dfn title="pending play state">pending</dfn></dt>
1343+
<dd>The player is waiting on some pending task to complete.</dd>
1344+
<dt><dfn title="playing play state">playing</dfn></dt>
1345+
<dd>The player has a resolved <a>current time</a> that changes on each
1346+
<a>sample</a>.</dd>
1347+
<dt><dfn title="paused play state">paused</dfn></dt>
1348+
<dd>The player has been suspended and the <a>current time</a>
1349+
is no longer changing.</dd>
1350+
<dt><dfn title="finished play state">finished</dfn></dt>
1351+
<dd>The player has reached the natural boundary of its playback range
1352+
and the <a>current time</a> is no longer updating.</dd>
1353+
</dl>
1354+
<p>
1355+
The <a>play state</a> of <a>player</a>, <var>player</var>, at a given
1356+
moment is the state corresponding to the <em>first</em> matching
1357+
condition from the following:
1358+
</p>
1359+
<dl class="switch">
1360+
<dt><var>player</var> has a <a>pending play task</a> or a
1361+
<var>pending pause task</var>,</dt>
1362+
<dd>&rarr; <a title="pending play state">pending</a></dd>
1363+
<dt>The <a>current time</a> of <var>player</var> is
1364+
<a>unresolved</a>,</dt>
1365+
<dd>&rarr; <a title="idle play state">idle</a></dd>
1366+
<dt>The <a>paused flag</a> of <var>player</var> is true,</dt>
1367+
<dd>&rarr; <a title="paused play state">paused</a></dd>
1368+
<dt>For <var>player</var>,
1369+
<a>player playback rate</a> &gt; 0 and
1370+
<a>current time</a> &ge; <a>source content end</a>; or
1371+
<a>player playback rate</a> &lt; 0 and
1372+
<a>current time</a> &le; 0,</dt>
1373+
<dd>&rarr; <a title="finished play state">finished</a></dd>
1374+
<dt>Otherwise,</dt>
1375+
<dd>&rarr; <a title="playing play state">playing</a></dd>
1376+
</dl>
1377+
<div class="note">
1378+
<p>
1379+
Note that the <a>paused play state</a> effectively
1380+
&ldquo;wins&rdquo; over the <a>finished play state</a>.
1381+
</p>
1382+
<p>
1383+
However, the procedure to <a>play a player</a> is defined such that
1384+
a player that is paused outside of its natural playback range can
1385+
be converted from a <a title="paused play state">paused</a>
1386+
player into a <a title="finished play state">finished</a> player
1387+
without restarting as shown below.
1388+
</p>
1389+
<pre class='example sh_javascript'>
1390+
player.source.duration = 5000;
1391+
player.currentTime = 4000;
1392+
player.pause();
1393+
player.ready.then(function() {
1394+
player.source.duration = 3000;
1395+
// Displays 'paused'
1396+
alert(player.playState);
1397+
player.play();
1398+
return player.ready;
1399+
}).then(function() {
1400+
// Displays 'finished'
1401+
alert(player.playState);
1402+
});
1403+
</pre>
1404+
</div>
1405+
</section>
13341406
<section>
13351407
<h2>Player events</h2>
13361408
<p>
@@ -5725,15 +5797,9 @@ <h3>The <code>AnimationPlayer</code> interface</h3>
57255797
this version of respec doesn't support that.
57265798
</p>
57275799
</dd>
5728-
<dt>readonly attribute boolean paused</dt>
5729-
<dd>
5730-
The <a>paused state</a> of this player.
5731-
</dd>
5732-
<dt>readonly attribute boolean finished</dt>
5800+
<dt>readonly attribute AnimationPlayState playState</dt>
57335801
<dd>
5734-
Returns true if this <a>player</a> has reached or passed the end of
5735-
its <a>source content</a> in its current <a>playback direction</a>.
5736-
This corresponds to when the player is <a>limited</a>.
5802+
The <a>play state</a> of this player.
57375803
</dd>
57385804
<dt>void cancel()</dt>
57395805
<dd>
@@ -5777,6 +5843,21 @@ <h3>The <code>AnimationPlayer</code> interface</h3>
57775843
</p>
57785844
</dd>
57795845
</dl>
5846+
<section>
5847+
<h3>The <code>AnimationPlayState</code> enumeration</h3>
5848+
<dl title="enum AnimationPlayState" class="idl">
5849+
<dt>idle</dt>
5850+
<dd>Corresponds to the <a>idle play state</a>.</dd>
5851+
<dt>pending</dt>
5852+
<dd>Corresponds to the <a>pending play state</a>.</dd>
5853+
<dt>playing</dt>
5854+
<dd>Corresponds to the <a>playing play state</a>.</dd>
5855+
<dt>paused</dt>
5856+
<dd>Corresponds to the <a>paused play state</a>.</dd>
5857+
<dt>finished</dt>
5858+
<dd>Corresponds to the <a>finished play state</a>.</dd>
5859+
</dl>
5860+
</section>
57805861
</section>
57815862
<section>
57825863
<h3>The <code>AnimationNode</code> interface</h3>

0 commit comments

Comments
 (0)