changeset
[web-animations] Remove time lag and replace with adjusted start time
Tue, 15 Apr 2014 14:36:15 +0900
- author
- Brian Birtles <birtles@gmail.com>
- date
- Tue, 15 Apr 2014 14:36:15 +0900
- changeset 1469
- f7e54dcbd4ea
- parent 1468
- 9a72841fc128
- child 1470
- c5491ba45310
[web-animations] Remove time lag and replace with adjusted start time
1.1 --- a/web-animations/img/pausing.svg Thu Apr 10 11:00:02 2014 +0200 1.2 +++ b/web-animations/img/pausing.svg Tue Apr 15 14:36:15 2014 +0900 1.3 @@ -1,7 +1,7 @@ 1.4 <!-- vim: set expandtab ts=2 sw=2 tw=80: --> 1.5 <svg xmlns="http://www.w3.org/2000/svg" 1.6 xmlns:xlink="http://www.w3.org/1999/xlink" 1.7 - width="100%" height="100%" viewBox="0 0 500 700"> 1.8 + width="100%" height="100%" viewBox="0 0 500 585"> 1.9 <defs> 1.10 <style type="text/css"> 1.11 svg { 1.12 @@ -27,18 +27,6 @@ 1.13 stroke-dasharray: 4 4; 1.14 stroke-width: 2; 1.15 } 1.16 - .dashLine { 1.17 - stroke: red; 1.18 - fill: none; 1.19 - stroke-dasharray: 2 6; 1.20 - stroke-width: 2.5; 1.21 - stroke-linecap: round; 1.22 - } 1.23 - .bracket { 1.24 - stroke: black; 1.25 - stroke-width: 1.5; 1.26 - fill: none; 1.27 - } 1.28 .activeSpan { 1.29 fill: #eee; 1.30 stroke: black; 1.31 @@ -54,9 +42,6 @@ 1.32 } 1.33 1.34 /* Text labels */ 1.35 - .exampleLabel { 1.36 - font-size: 1.5em; 1.37 - } 1.38 .tickLabel { 1.39 font-size: 0.8em; 1.40 text-anchor: middle; 1.41 @@ -64,9 +49,6 @@ 1.42 .timeLabel { 1.43 text-anchor: middle; 1.44 } 1.45 - .regionLabel { 1.46 - text-anchor: middle; 1.47 - } 1.48 .animationLabel { 1.49 text-anchor: start; 1.50 font-size: 30px; 1.51 @@ -123,9 +105,10 @@ 1.52 </g> 1.53 </g> 1.54 <!-- A: pause during active interval --> 1.55 - <g transform="translate(10 120)"> 1.56 + <g transform="translate(0 65)"> 1.57 + <text x="5" y="1em">(a) Pause during animation</text> 1.58 <!-- Initial state --> 1.59 - <g transform="translate(120)"> 1.60 + <g transform="translate(130 70)"> 1.61 <rect width="330" height="50" class="activeSpan"/> 1.62 <path d="M0 50l90-18.75h90l150-31.25v50z" class="animProgress"/> 1.63 <use xlink:href="#star"/> 1.64 @@ -134,7 +117,7 @@ 1.65 <text x="15" y="35" class="animationLabel">A</text> 1.66 </g> 1.67 <!-- Pause actions --> 1.68 - <g transform="translate(210)"> 1.69 + <g transform="translate(220 70)"> 1.70 <rect width="90" height="50" class="pauseSpan"/> 1.71 <path d="M0 0v40" class="dottedArrow"/> 1.72 <text y="-10" class="timeLabel">pause</text> 1.73 @@ -142,33 +125,21 @@ 1.74 <text x="90" y="70" class="timeLabel">unpause</text> 1.75 </g> 1.76 <!-- Result arrow --> 1.77 - <text x="240" y="100" class="resultArrow">⇓</text> 1.78 + <text x="250" y="170" class="resultArrow">⇓</text> 1.79 <!-- Updated state --> 1.80 - <g transform="translate(210 160)"> 1.81 + <g transform="translate(220 200)"> 1.82 <rect width="240" height="50" class="activeSpan"/> 1.83 <path d="M0 50l240-50v50z" class="animProgress"/> 1.84 - <text y="-35">Player current time</text> 1.85 - <path d="M0-25h270" class="arrowLine"/> 1.86 - <path d="M0-30v10m120-10v10m120-10v10" class="tick"/> 1.87 - <g transform="translate(0 -5)" class="tickLabel"> 1.88 - <text x="0">0</text> 1.89 - <text x="120">1</text> 1.90 - <text x="240">2</text> 1.91 - </g> 1.92 <text x="15" y="35" class="animationLabel">A′</text> 1.93 - <g transform="translate(-90)"> 1.94 - <line y2="50" class="dashLine"/> 1.95 - <use xlink:href="#star"/> 1.96 - <path d="M2 55s0 7 7 7h29s7 0 7 7c0 0 0-7 7-7h29s7 0 7-7" 1.97 - class="bracket"/> 1.98 - <text x="45" y="90" class="regionLabel">time lag</text> 1.99 - </g> 1.100 + <use xlink:href="#star"/> 1.101 + <text x="5" y="-10" class="startTimeLabel">adjusted start time</text> 1.102 </g> 1.103 </g> 1.104 <!-- B: pause before start --> 1.105 - <g transform="translate(10 440)"> 1.106 + <g transform="translate(0 340)"> 1.107 + <text x="5" y="1em">(b) Pause before animation</text> 1.108 <!-- Initial state --> 1.109 - <g transform="translate(120)"> 1.110 + <g transform="translate(130 60)"> 1.111 <rect width="240" height="50" class="activeSpan"/> 1.112 <path d="M0 50l240-50v50z" class="animProgress"/> 1.113 <use xlink:href="#star"/> 1.114 @@ -176,7 +147,7 @@ 1.115 <text x="15" y="35" class="animationLabel">B</text> 1.116 </g> 1.117 <!-- Pause actions --> 1.118 - <g transform="translate(30)"> 1.119 + <g transform="translate(40 60)"> 1.120 <rect width="60" height="50" fill="white"/> 1.121 <rect width="60" height="50" class="pauseSpan"/> 1.122 <path d="M0 0v40" class="dottedArrow"/> 1.123 @@ -185,27 +156,14 @@ 1.124 <text x="60" y="70" class="timeLabel">unpause</text> 1.125 </g> 1.126 <!-- Result arrow --> 1.127 - <text x="240" y="95" class="resultArrow">⇓</text> 1.128 + <text x="250" y="155" class="resultArrow">⇓</text> 1.129 <!-- Updated state --> 1.130 - <g transform="translate(180 160)"> 1.131 + <g transform="translate(190 190)"> 1.132 <rect width="240" height="50" class="activeSpan"/> 1.133 <path d="M0 50l240-50v50z" class="animProgress"/> 1.134 - <text y="-40">Player current time</text> 1.135 - <path d="M0-30h300" class="arrowLine"/> 1.136 - <path d="M0-35v10m120-10v10m120-10v10" class="tick"/> 1.137 - <g transform="translate(0 -10)" class="tickLabel"> 1.138 - <text x="0">0</text> 1.139 - <text x="120">1</text> 1.140 - <text x="240">2</text> 1.141 - </g> 1.142 + <use xlink:href="#star"/> 1.143 + <text x="5" y="-8" class="startTimeLabel">adjusted start time</text> 1.144 <text x="15" y="35" class="animationLabel">B′</text> 1.145 - <g transform="translate(-60)"> 1.146 - <line y2="50" class="dashLine"/> 1.147 - <use xlink:href="#star"/> 1.148 - <path d="M2 55s0 7 7 7h14s7 0 7 7c0 0 0-7 7-7h14s7 0 7-7" 1.149 - class="bracket"/> 1.150 - <text x="30" y="90" class="regionLabel">time lag</text> 1.151 - </g> 1.152 </g> 1.153 </g> 1.154 </svg>
2.1 --- a/web-animations/img/seeking.svg Thu Apr 10 11:00:02 2014 +0200 2.2 +++ b/web-animations/img/seeking.svg Tue Apr 15 14:36:15 2014 +0900 2.3 @@ -1,7 +1,7 @@ 2.4 <!-- vim: set expandtab ts=2 sw=2 tw=80: --> 2.5 <svg xmlns="http://www.w3.org/2000/svg" 2.6 xmlns:xlink="http://www.w3.org/1999/xlink" 2.7 - width="100%" height="100%" viewBox="0 0 500 548"> 2.8 + width="100%" height="100%" viewBox="0 0 500 493"> 2.9 <defs> 2.10 <style type="text/css"> 2.11 svg { 2.12 @@ -23,11 +23,6 @@ 2.13 marker-end: url(#arrow); 2.14 fill: none; 2.15 } 2.16 - .bracket { 2.17 - stroke: black; 2.18 - stroke-width: 1.5; 2.19 - fill: none; 2.20 - } 2.21 .activeSpan { 2.22 fill: paleturquoise; 2.23 stroke: black; 2.24 @@ -57,12 +52,6 @@ 2.25 font-size: 0.8em; 2.26 text-anchor: middle; 2.27 } 2.28 - .timeLabel { 2.29 - text-anchor: middle; 2.30 - } 2.31 - .regionLabel { 2.32 - text-anchor: middle; 2.33 - } 2.34 .animationLabel { 2.35 text-anchor: start; 2.36 font-size: 15px; 2.37 @@ -73,14 +62,6 @@ 2.38 font-style: italic; 2.39 fill: red; 2.40 } 2.41 - .action { 2.42 - fill: #FF4500; 2.43 - font-size: 25px; 2.44 - font-style: italic; 2.45 - } 2.46 - text.executionBlock { 2.47 - font-size: 25px; 2.48 - } 2.49 </style> 2.50 2.51 <!-- Arrows --> 2.52 @@ -145,7 +126,7 @@ 2.53 <text x="5" y="0.1em">(b) After seeking current time to 2s</text> 2.54 <use xlink:href="#timeline" x="10" y="25"/> 2.55 <g transform="translate(70 120)"> 2.56 - <rect y="90" width="240" height="50" class="activeSpan"/> 2.57 + <rect y="30" width="240" height="50" class="activeSpan"/> 2.58 <path d="M0 0h360" class="arrowLine"/> 2.59 <path d="M0-5v10m120-10v10m120-10v10" class="tick"/> 2.60 <text y="-30" class="timelineLabel">Player current time′</text> 2.61 @@ -153,18 +134,15 @@ 2.62 <text x="0">0</text> 2.63 <text x="120">1</text> 2.64 </g> 2.65 - <use x="60" xlink:href="#star"/> 2.66 - <text x="65" y="-8" class="startTimeLabel">start time = 1s</text> 2.67 - <text x="15" y="120" class="animationLabel">Source content</text> 2.68 - <path d="M2 25s0 7 7 7h14s7 0 7 7c0 0 0-7 7-7h14s7 0 7-7" 2.69 - class="bracket"/> 2.70 - <text x="30" y="60" class="regionLabel">time lag<tspan 2.71 - x="30" dy="1em">= -0.5s</tspan></text> 2.72 + <use x="0" xlink:href="#star"/> 2.73 + <text x="5" y="-8" 2.74 + class="startTimeLabel">adjusted start time = 0.5s</text> 2.75 + <text x="15" y="60" class="animationLabel">Source content</text> 2.76 </g> 2.77 </g> 2.78 <!-- Dotted 't' line --> 2.79 <g transform="translate(310 20)"> 2.80 - <path d="M0 0v525" class="tLine"/> 2.81 + <path d="M0 0v470" class="tLine"/> 2.82 <text x="5" y="5" class="tLineLabel">t</text> 2.83 <text x="5" y="30" class="tLineNum">2.5</text> 2.84 <text x="5" y="135" class="tLineNum">1.5</text>
3.1 --- a/web-animations/index.html Thu Apr 10 11:00:02 2014 +0200 3.2 +++ b/web-animations/index.html Tue Apr 15 14:36:15 2014 +0900 3.3 @@ -567,8 +567,8 @@ 3.4 </p> 3.5 <p> 3.6 A <a>player</a>'s <dfn>player start time</dfn> is the <a>time value</a> 3.7 - of its <a>timeline</a> when its <a>source content</a> is scheduled to 3.8 - begin playback. 3.9 + of its <a>timeline</a> when its <a>source content</a> is initially 3.10 + scheduled to begin playback. 3.11 </p> 3.12 <p> 3.13 When a <a>player</a> is created, it is assigned a globally unique 3.14 @@ -589,41 +589,56 @@ 3.15 </p> 3.16 <blockquote> 3.17 <code><a>current time</a> = 3.18 - (<var>timeline time</var> - <a>player start time</a>) 3.19 - × <a title="player playback rate">playback rate</a> 3.20 - - <a>time lag</a></code> 3.21 + (<var>timeline time</var> - <a>adjusted start time</a>) 3.22 + × <a title="player playback rate">playback rate</a></code> 3.23 + <p> 3.24 + <em>unless</em> the <a>hold time</a> is <em>not</em> null, in which 3.25 + case the <a>current time</a> is equal to the <a>hold time</a>. 3.26 + </p> 3.27 </blockquote> 3.28 <p> 3.29 Where: 3.30 </p> 3.31 <ul> 3.32 <li><var>timeline time</var> is the current <a>time value</a> of the 3.33 - <a>timeline</a> with which this <a>player</a> is associated.</li> 3.34 - <li><var>player start time</var> is the player's <a 3.35 - title="player start time">start time</a>.</li> 3.36 + <a>timeline</a> with which this <a>player</a> is associated. 3.37 + <li><a>adjusted start time</a> is the value described in <a 3.38 + href="#calculating-the-adjusted-start-time" class="sectionRef"></a>. 3.39 <li><var>playback rate</var> is the player's <a 3.40 title="player playback rate">playback rate</a> value described in <a 3.41 - href="#speed-control" class="sectionRef"></a>.</li> 3.42 - <li><var>time lag</var> is the <a>time lag</a> value described in 3.43 - <a href="#seeking--pausing-and-limiting" class="sectionRef"></a>.</li> 3.44 + href="#speed-control" class="sectionRef"></a>. 3.45 + <li><a>hold time</a> is the value described in 3.46 + <a href="#seeking--pausing-and-limiting-properties" 3.47 + class="sectionRef"></a>. 3.48 </ul> 3.49 <p> 3.50 If the <a>timeline</a> with which the <a>player</a> is associated is 3.51 <a>not started</a> then the <a>current time</a> is <code>null</code>. 3.52 </p> 3.53 <p> 3.54 + The procedure for performing manual updates to the <a>current time</a> 3.55 + is defined in <a href="#performing-a-seek" class="sectionRef"></a>. 3.56 + </p> 3.57 + <p> 3.58 It is often useful to manipulate the <a>current time</a> of a player 3.59 even when its associated <a>timeline</a> is <a>not started</a>, for 3.60 example, to pre-seek a player. 3.61 - For this purpose, we define the <dfn>effective current time</dfn> of 3.62 - a player as the result of evaluating the <a>current time</a> as above 3.63 - but substituting the <a>effective timeline time</a> for the 3.64 - <var>timeline time</var>. 3.65 - </p> 3.66 - <p> 3.67 - The procedure for performing manual updates to the <a>current time</a> 3.68 - is defined in <a href="#performing-a-seek" class="sectionRef"></a>. 3.69 - </p> 3.70 + For this purpose, we have the following additional definitions: 3.71 + </p> 3.72 + <dl> 3.73 + <dt><dfn>effective timeline time</dfn></dt> 3.74 + <dd> 3.75 + The current <a>time value</a> of the <a>timeline</a> associated 3.76 + with a <a>player</a> unless the timeline is <a>not started</a>, in 3.77 + which case the <var>effective timeline time</var> is zero. 3.78 + </dd> 3.79 + <dt><dfn>effective current time</dfn></dt> 3.80 + <dd> 3.81 + The result of evaluating the <a>current time</a> as above 3.82 + but substituting the <a>effective timeline time</a> for the 3.83 + <var>timeline time</var>. 3.84 + </dd> 3.85 + </dl> 3.86 </section> 3.87 <section> 3.88 <h3>Seeking, pausing and limiting</h3> 3.89 @@ -634,22 +649,14 @@ 3.90 <section class="informative"> 3.91 <h4>Introduction to seeking</h4> 3.92 <p> 3.93 - Changing the current playback position of a player can be used to 3.94 - rewind its <a>source content</a> to its start point, fast-forward 3.95 - to a point in the future, or to provide ad-hoc synchronization 3.96 - between timed items. 3.97 - </p> 3.98 - <p> 3.99 - However, in Web Animations, the <a title="player start time">start 3.100 - time</a> of a <a>player</a> has special significance in determining 3.101 - the priority of animations (see <a href="#combining-animations" 3.102 - class="sectionRef"></a>) and so we cannot simply adjust the <a 3.103 - title="player start time">start time</a>. 3.104 - Instead, an additional offset is introduced called the <a>time 3.105 - lag</a> that further offsets a player's <a>current time</a> from 3.106 - its timeline. 3.107 - The effect of the <a>time lag</a> when seeking is illustrated 3.108 - below. 3.109 + Changing the current playback position of a player, that is, it's 3.110 + <a>current time</a>, can be used to rewind its <a>source content</a> 3.111 + to its start point, fast-forward to a point in the future, or to 3.112 + provide ad-hoc synchronization between timed items. 3.113 + </p> 3.114 + <p> 3.115 + Changing the <a>current time</a> of a player has the side effect of 3.116 + updating its <a>adjusted start time</a> as illustrated below. 3.117 </p> 3.118 <div class="figure"> 3.119 <img src="img/seeking.svg" width="600" 3.120 @@ -658,9 +665,14 @@ 3.121 <p class="caption"> 3.122 At time <var>t</var>, a seek is performed on the player changing its 3.123 <a>current time</a> from 1.5s to 2s.<br> 3.124 - As a result, the <a>time lag</a> is set to -0.5s.<br> 3.125 - Note that the <a title="player start time">start time</a> indicated 3.126 - by a red star does not change. 3.127 + As a result, the <a>adjusted start time</a> is set to 0.5s.<br> 3.128 + </p> 3.129 + <p> 3.130 + Although the <a>adjusted start time</a> changes, the original 3.131 + <a>player start time</a> is preserved since it is used for 3.132 + determining the priority of competing animations as described in <a 3.133 + href="#the-animation-stack" class="sectionRef"></a>. 3.134 + This prioritorization should not change as a result of seeking. 3.135 </p> 3.136 <p> 3.137 It is possible to seek a player even if its <a>timeline</a> is 3.138 @@ -673,13 +685,9 @@ 3.139 <h4>Introduction to pausing</h4> 3.140 <p> 3.141 Pausing can be used to temporarily suspend a <a>player</a>. 3.142 - Like seeking, pausing effectively causes the <a>current time</a> of 3.143 - a player to be offset from its <a>timeline</a> by means of 3.144 - setting the <a>time lag</a>. 3.145 - </p> 3.146 - <p> 3.147 - The effect of pausing on a <a>player</a>'s <a>time lag</a> is 3.148 - illustrated below. 3.149 + Like seeking, pausing controls the <a>current time</a> of 3.150 + a player by updating its <a>adjusted start time</a>. 3.151 + The result is illustrated below. 3.152 </p> 3.153 <div class="figure"> 3.154 <img src="img/pausing.svg" width="600" 3.155 @@ -690,8 +698,7 @@ 3.156 Whether pausing before or after a <a>player</a>'s <a 3.157 title="player start time">start time</a> 3.158 the duration of the interval during which the <a>player</a> was 3.159 - paused is added to the <a>player</a>'s <a>time lag</a> whilst the 3.160 - <a title="player start time">start time</a> remains unaffected. 3.161 + paused is added to the <a>player</a>'s <a>adjusted start time</a>. 3.162 </p> 3.163 </section> 3.164 <section class="informative"> 3.165 @@ -702,13 +709,13 @@ 3.166 at which point they stop. 3.167 If such players are able to play in reverse, they typically stop 3.168 playing when they reach the beginning of their media. 3.169 - In order to emulate this behavior and to provide some consistency 3.170 + In order to emulate this behavior and to provide consistency 3.171 with HTML's <a 3.172 href="http://www.w3.org/TR/html5/embedded-content-0.html#media-elements">media 3.173 elements</a> [[HTML5]], the <a>current time</a> of Web Animations' 3.174 - players do not progress beyond the <a>end time</a> of their 3.175 + players do not play forwards beyond the <a>end time</a> of their 3.176 <a>source content</a> or play backwards past time zero. 3.177 - This is called <em>limiting</em>. 3.178 + This behavior is called <em>limiting</em>. 3.179 </p> 3.180 <p> 3.181 Graphically, the effect of limiting is shown below. 3.182 @@ -719,7 +726,8 @@ 3.183 </div> 3.184 <p class="caption"> 3.185 The effect of limiting on a <a>player</a> with a start time of 1s, 3.186 - and source content of length 3s. 3.187 + a source content of length 3s, and a positive <a>player playback 3.188 + rate</a>. 3.189 After the <a>current time</a> of the player reaches the end of the 3.190 source content, it is capped at 3s. 3.191 </p> 3.192 @@ -727,7 +735,7 @@ 3.193 It is possible, however, to seek the <a>current time</a> of 3.194 a <a>player</a> to a time past the end of the <a>source content</a>. 3.195 When doing so, the <a>current time</a> will not progress but the 3.196 - player will act as if it had been paused. 3.197 + player will act as if it had been paused at the seeked time. 3.198 </p> 3.199 <p> 3.200 This allows, for example, seeking the <a>current time</a> of 3.201 @@ -737,7 +745,7 @@ 3.202 mark. 3.203 </p> 3.204 <p> 3.205 - Similar behavior to the above scenarios may be arise when the 3.206 + Similar behavior to the above scenarios may arise when the 3.207 length of a player's <a>source content</a> changes. 3.208 </p> 3.209 <p> 3.210 @@ -757,14 +765,11 @@ 3.211 pausing and limiting. 3.212 </p> 3.213 <dl> 3.214 - <dt><dfn>time lag</dfn></dt> 3.215 + <dt><dfn>adjusted start time</dfn></dt> 3.216 <dd> 3.217 - The offset from a player's scheduled current time as defined by 3.218 - its <a title="player start time">start time</a>, and its actual 3.219 - current time after accounting for the effects of seeking, 3.220 - pausing, and limiting. 3.221 - The <a>time lag</a> is initially zero and is updated as per the 3.222 - definition in <a href="#calculating-the-time-lag" 3.223 + The <a>player start time</a> after incorporating changes 3.224 + introduced by seeking, pausing, and limiting as defined in <a 3.225 + href="#calculating-the-adjusted-start-time" 3.226 class="sectionRef"></a>. 3.227 </dd> 3.228 <dt><dfn>paused state</dfn></dt> 3.229 @@ -786,105 +791,96 @@ 3.230 In addition to these properties, implementations are required to 3.231 keep track of the last calculated value of the <a>current time</a> 3.232 in order to produce correct limiting behavior (see <a 3.233 - href="#calculating-the-time-lag" class="sectionRef"></a>). 3.234 - </p> 3.235 - <p class="note"> 3.236 - It is possible to conflate the <a>hold time</a> with the previously 3.237 - calculated current time provided proper care is taken to update the 3.238 - stored value of the <a>time lag</a>. 3.239 - For clarity, however, these two values are separated in the 3.240 - following algorithms. 3.241 - </p> 3.242 - <p class="issue"> 3.243 - Is it actually the previously calculated value? Or the value 3.244 - calculated on the previous sample / seek? Does it actually make any 3.245 - practical difference? 3.246 - </p> 3.247 - <p> 3.248 - A number of calculations for performing seeking, pausing and 3.249 - limiting are defined to operate even when the associated 3.250 - <a>timeline</a> is <a>not started</a>. 3.251 - For such situations we define the <dfn>effective timeline time</dfn> 3.252 - as the current <a>time value</a> of the <a>timeline</a> associated 3.253 - with a <a>player</a> unless the timeline is <a>not started</a>, in 3.254 - which case the <var>effective timeline time</var> is zero. 3.255 + href="#automatically-updating-the-hold-time" 3.256 + class="sectionRef"></a>). 3.257 </p> 3.258 </section> 3.259 <section> 3.260 - <h4>Calculating the time lag</h4> 3.261 - <p> 3.262 - The <a>time lag</a> value is both a stored and a calculated value. 3.263 - When a player is paused or <a>limited</a>, the value is calculated 3.264 - from the <a>hold time</a>. 3.265 - When a player is not paused or limited, the stored value is used. 3.266 - The stored value is initially zero, and is updated when the player 3.267 - is unpaused, seeked, or becomes no longer limited. 3.268 - </p> 3.269 - <p> 3.270 - The value of <a>time lag</a> at a given moment is calculated as 3.271 - follows: 3.272 + <h4>Calculating the adjusted start time</h4> 3.273 + <p> 3.274 + The <a>adjusted start time</a> value is both a stored and 3.275 + a calculated value. 3.276 + When a player is paused, the value is calculated from the <a>hold 3.277 + time</a>. 3.278 + When a player is not paused, the stored value is used. 3.279 + The stored value is initially equal to the <a>player start time</a>, 3.280 + and may be updated whenever the player is unpaused, seeked, becomes 3.281 + no longer limited, or when the <a>player start time</a> is updated. 3.282 + </p> 3.283 + <p> 3.284 + The value of the <a>adjusted start time</a> at a given moment is 3.285 + based on the <a>paused state</a> as follows: 3.286 + </p> 3.287 + <dl class="switch"> 3.288 + <dt>If the <a>paused state</a> is true,</dt> 3.289 + <dd> 3.290 + Return the result of evaluating <code><var>timeline time</var> 3.291 + - <a>hold time</a> / <a>player playback rate</a></code>. 3.292 + </dd> 3.293 + <dt>Otherwise,</dt> 3.294 + <dd> 3.295 + Return the stored value for the <a>adjusted start time</a>. 3.296 + </dd> 3.297 + </dl> 3.298 + </section> 3.299 + <section> 3.300 + <h4>Automatically updating the hold time</h4> 3.301 + <p class="issue"> 3.302 + What should the behavior be here when the <a>unlimited current 3.303 + time</a> is null? 3.304 + </p> 3.305 + <p> 3.306 + When the <a>paused state</a> is false, the <a>hold time</a> is 3.307 + updated on each <a>sample</a> according to the following procedure: 3.308 </p> 3.309 <ol> 3.310 - <li>Let the <dfn>pause time lag</dfn> be the result of evaluating 3.311 - <code>(<a>effective timeline time</a> - <a>player start 3.312 - time</a>) × <a>player playback rate</a> - 3.313 - <a>hold time</a></code>. 3.314 <li>Let the <dfn>unlimited current time</dfn> be the result of 3.315 - evaluating the <a>current time</a> using the stored 3.316 - value of the <a>time lag</a>. 3.317 + evaluating the <a>current time</a> using a <a>hold time</a> of 3.318 + null. 3.319 <li>Let the <dfn>source content end</dfn> be the <a>end time</a> 3.320 of the player's <a>source content</a>. 3.321 If the player has no <a>source content</a>, let the 3.322 <em>source content end</em> be zero. 3.323 - <li>The time lag is then calculated using the first matching 3.324 + <li>The <a>hold time</a> is updated using the first matching 3.325 condition from below: 3.326 <dl class="switch"> 3.327 - <dt>If the <a>paused state</a> is true,</dt> 3.328 - <dd>Return the <a>pause time lag</a>.</dd> 3.329 - <dt>If the <a>player playback rate</a> < zero and 3.330 - the <a>unlimited current time</a> ≤ zero,</dt> 3.331 + <dt>If the <a>player playback rate</a> < 0 and 3.332 + the <a>unlimited current time</a> ≤ 0,</dt> 3.333 <dd> 3.334 - <ol> 3.335 - <li>If the <a>hold time</a> is null</a>, 3.336 - let the <a>hold time</a> be zero. 3.337 - <li>Return the result of evaluating the <a>pause 3.338 - time lag</a> using the possibly updated <a>hold 3.339 - time</a>. 3.340 - </ol> 3.341 + Let the <a>hold time</a> be zero. 3.342 </dd> 3.343 - <dt>If the <a>player playback rate</a> > zero and 3.344 - the <a>unlimited current time</a> ≥ 3.345 - <a>source content end</a>,</dt> 3.346 + <dt>If the <a>player playback rate</a> > 0 and 3.347 + the <a>unlimited current time</a> ≥ <a>source content 3.348 + end</a>,</dt> 3.349 <dd> 3.350 - <ol> 3.351 - <li>If the <a>hold time</a> is null</a>, 3.352 - let the <a>hold time</a> be the maximum value of 3.353 - the last calculated value of <a>current time</a> 3.354 - and <a>source content end</a>. 3.355 - If there is no previously calculated value of <a>current 3.356 - time</a> or it is <code>null</code>, 3.357 - let the <a>hold time</a> be <a>source content end</a>. 3.358 - <li>Return the result of evaluating the <a>pause 3.359 - time lag</a> using the possibly updated <a>hold 3.360 - time</a>. 3.361 - </ol> 3.362 + Let the <a>hold time</a> be the maximum value of 3.363 + the last calculated value of <a>current time</a> 3.364 + and <a>source content end</a>. 3.365 + If there is no previously calculated value of <a>current 3.366 + time</a> or it is null, 3.367 + let the <a>hold time</a> be <a>source content end</a>. 3.368 </dd> 3.369 <dt>Otherwise,</dt> 3.370 <dd> 3.371 <ol> 3.372 <li>If the <a>hold time</a> is not null, 3.373 - set the stored value of the 3.374 - <a>time lag</a> to the <a>pause time lag</a>. 3.375 + set the stored value of the <a>adjusted start time</a> 3.376 + to the result of evaluating <code><var>timeline 3.377 + time</var> - <a>unlimited current time</a> / <a>player 3.378 + playback rate</a></code>. 3.379 <li>Let the <a>hold time</a> be null. 3.380 - <li>Return the stored value of the <a>time lag</a>. 3.381 </ol> 3.382 </dd> 3.383 </dl> 3.384 </li> 3.385 </ol> 3.386 + <p class="issue"> 3.387 + Are there other times we need to run this procedure—other than 3.388 + on each sample? 3.389 + </p> 3.390 </section> 3.391 <section> 3.392 - <h4>Updating the <a>paused state</a></h4> 3.393 + <h4>Updating the paused state</h4> 3.394 <p> 3.395 The procedure for updating the <a>paused state</a> is as 3.396 follows: 3.397 @@ -895,33 +891,50 @@ 3.398 </li> 3.399 <li> 3.400 If <var>new value</var> equals the current <a>paused state</a>, 3.401 - return. 3.402 + abort this procedure. 3.403 </li> 3.404 <li> 3.405 The next step depends on the current <a>paused state</a> as 3.406 follows, 3.407 <dl class="switch"> 3.408 - <dt>If <a>paused state</a> is true,</dt> 3.409 + <dt>If <a>paused state</a> is true and the <a>player</a> is not 3.410 + <a>limited</a>,</dt> 3.411 <dd> 3.412 <ol> 3.413 - <li>Set the <em>stored</em> value of <a>time lag</a> to the 3.414 - <em>current calculated</em> value of <a>time lag</a> as 3.415 - defined in <a href="#calculating-the-time-lag" 3.416 + <li>Set the <em>stored</em> value of <a>adjusted start 3.417 + time</a> to the <em>current calculated</em> value of 3.418 + <a>adjusted start time</a> as 3.419 + defined in <a 3.420 + href="#calculating-the-adjusted-start-time" 3.421 class="sectionRef"></a>. 3.422 <li>Set the <a>hold time</a> to null. 3.423 </ol> 3.424 </dd> 3.425 - <dt>Otherwise,</dt> 3.426 + <dt>Otherwise if the <a>paused state</a> is false,</dt> 3.427 <dd> 3.428 Record the current value of the <a>effective current time</a> 3.429 as <a>hold time</a>. 3.430 </dd> 3.431 + <dt>Otherwise,</dt> 3.432 + <dd> 3.433 + Do nothing. 3.434 + </dd> 3.435 </dl> 3.436 </li> 3.437 <li> 3.438 Update <a>paused state</a> to <var>new value</var>. 3.439 </li> 3.440 </ol> 3.441 + <p class="issue"> 3.442 + The above should probably use the <a>effective current time</a> when 3.443 + determining of the player is <a>limited</a> or not. 3.444 + But perhaps we should <em>always</em> use the <a>effective current 3.445 + time</a> in the definition of <a>limited</a>. 3.446 + </p> 3.447 + <p class="issue"> 3.448 + All the procedures in this section need to be audited to check they 3.449 + do the correct thing when the timeline is <a>not started</a>. 3.450 + </p> 3.451 </section> 3.452 <section> 3.453 <h4>Performing a seek</h4> 3.454 @@ -938,7 +951,8 @@ 3.455 <li>the <a>paused state</a> is true, or 3.456 <li>the <a>player playback rate</a> > 0 and <var>seek 3.457 time</var> ≥ <a>source content end</a> 3.458 - (as defined in <a href="#calculating-the-time-lag" 3.459 + (as defined in <a 3.460 + href="#automatically-updating-the-hold-time" 3.461 class="sectionRef"></a>), or 3.462 <li>the <a>player playback rate</a> < 0 and <var>seek 3.463 time</var> ≤ zero 3.464 @@ -949,15 +963,38 @@ 3.465 </p> 3.466 <ol> 3.467 <li>Reset the <a>hold time</a> to null. 3.468 - <li>Set the stored value for the <a>time lag</a> to the result 3.469 - of evaluating <code>(<a>effective timeline time</a> 3.470 - - <a>player start time</a>) × <a>player playback 3.471 - rate</a> - <var>seek time</var></code>. 3.472 + <li>Set the <a>adjusted start time</a> 3.473 + to the result of evaluating <code><var>timeline 3.474 + time</var> - <var>seek time</var> / <a>player 3.475 + playback rate</a></code>. 3.476 <li>Set the player's <a>finished flag</a> to false. 3.477 </ol> 3.478 </ol> 3.479 </section> 3.480 <section> 3.481 + <h4>Updating the player start time</h4> 3.482 + <p> 3.483 + The <a title="player start time">start time</a> of a <a>player</a> 3.484 + is updated to a new time, <var>new start time</var>, using the 3.485 + following procedure: 3.486 + </p> 3.487 + <ol> 3.488 + <li>Let <a>player start time</a> be <var>new start time</var>. 3.489 + <li>Update the <a>adjusted start time</a> using the first matching 3.490 + condition from the following: 3.491 + <dl class="switch"> 3.492 + <dt>If the <a>paused state</a> is true,</dt> 3.493 + <dd>Let the <a>hold time</a> be the result of evaluating 3.494 + <code><var>timeline time</var> - <var>new start time</var> 3.495 + × <a>player playback rate</a></code>.</dd> 3.496 + <dt>Otherwise,</dt> 3.497 + <dd>Let the <a>adjusted start time</a> be <var>new start 3.498 + time</var>.</dd> 3.499 + </dl> 3.500 + </li> 3.501 + </ol> 3.502 + </section> 3.503 + <section> 3.504 <h4>Limited players</h4> 3.505 <p> 3.506 A <a>player</a> is said to be <dfn>limited</dfn> when either of the 3.507 @@ -966,7 +1003,7 @@ 3.508 <ol> 3.509 <li><a>player playback rate</a> > 0 and <a>current 3.510 time</a> ≥ the player's <a>source content end</a> 3.511 - (as defined in <a href="#calculating-the-time-lag" 3.512 + (as defined in <a href="#automatically-updating-the-hold-time" 3.513 class="sectionRef"></a>), or 3.514 <li><a>player playback rate</a> < 0 and <a>current 3.515 time</a> ≤ zero. 3.516 @@ -1037,10 +1074,10 @@ 3.517 their status through <dfn title="player event">player events</dfn>. 3.518 </p> 3.519 <p> 3.520 - <a>Player events</a> are a property of the Web 3.521 - Animations timing model. 3.522 + <a>Player events</a> are a property of the Web Animations timing 3.523 + model. 3.524 As a result they are dispatched even when the <a>source content</a> of 3.525 - the player has no observable result or even when it is absent. 3.526 + the player is absent or has no observable result. 3.527 </p> 3.528 <section> 3.529 <h3>Types of player events</h3> 3.530 @@ -3791,6 +3828,7 @@ 3.531 player</a> of each of <var>A</var> and <var>B</var> converted 3.532 to the time space of the <a>global clock</a> so that earlier 3.533 times sort first. 3.534 + Note that this <em>not</em> the <a>adjusted start time</a>. 3.535 <li>Sort by the <a>player sequence number</a> so that lower 3.536 sequence numbers sort first. 3.537 <li>Sort <var>A</var> and <var>B</var> in <a>tree order</a>. 3.538 @@ -5144,10 +5182,10 @@ 3.539 <a>AnimationPlayer</a> object will be set to this object. 3.540 </p> 3.541 <p> 3.542 - Similarly, the <code>startTime</code> attribute will be set to the 3.543 - value of this object's <code>currentTime</code> attribute at the 3.544 - moment the method was called, or, if <code>currentTime</code> is 3.545 - <code>null</code>, zero.</li> 3.546 + Similarly, the <a title="player start time">start time</a> of the 3.547 + newly created <a>player</a> will be set to the value of this 3.548 + object's <code>currentTime</code> attribute at the moment the 3.549 + method was called. 3.550 </p> 3.551 <p> 3.552 The setting of the <code>source</code> attribute is described 3.553 @@ -5332,13 +5370,11 @@ 3.554 </dd> 3.555 <dt>attribute double startTime</dt> 3.556 <dd> 3.557 - The <a title="player start time">start time</a> of this player. 3.558 - <p> 3.559 - On setting, the <a>hold time</a> must be reset to 3.560 - <code>null</code> so that when the <a>time lag</a> is recalculated 3.561 - (see <a href="#calculating-the-time-lag" class="sectionRef"></a>) 3.562 - the <a>hold time</a> will be updated accordingly. 3.563 - </p> 3.564 + Returns the <a>adjusted start time</a> of this player. 3.565 + Setting this attribute updates the <a>player start time</a> (and 3.566 + consequently the <a>adjusted start time</a>) using the procedure 3.567 + defined in <a href="#updating-the-player-start-time" 3.568 + class="sectionRef"></a>. 3.569 </dd> 3.570 <dt>attribute double currentTime</dt> 3.571 <dd> 3.572 @@ -5346,14 +5382,6 @@ 3.573 Setting this attribute follows the procedure defined in <a 3.574 href="#performing-a-seek" class="sectionRef"></a>. 3.575 </dd> 3.576 - <dt>readonly attribute double timeLag</dt> 3.577 - <dd> 3.578 - The <a>time lag</a> of this player which represents the number of 3.579 - seconds the <code>currentTime</code> has been delayed due to pausing 3.580 - and seeking. 3.581 - Negative values indicate the player has been advanced ahead of its 3.582 - scheduled time by seeking. 3.583 - </dd> 3.584 <dt>attribute double playbackRate</dt> 3.585 <dd> 3.586 The <a title="player playback rate">playback rate</a> of this 3.587 @@ -7828,8 +7856,8 @@ 3.588 unloaded and traversed, 3.589 are encouraged to apply consistent handling to documents containing Web 3.590 Animations content. 3.591 - If provided, this behavior SHOULD be achieved by applying a time lag 3.592 - to any <a>timelines</a> bound to the <a>global clock</a>. 3.593 + If provided, this behavior SHOULD be achieved by adjusting the time 3.594 + values of any <a>timelines</a> bound to the <a>global clock</a>. 3.595 </p> 3.596 </section> 3.597 3.598 @@ -7901,9 +7929,9 @@ 3.599 href="http://www.w3.org/TR/navigation-timing/#dom-performancetiming-navigationstart"><code>navigationStart</code></a> 3.600 moment defined by [[!NAVIGATION-TIMING]]. 3.601 <li>Altered the definition of <a>effective current time</a>. 3.602 - <li>Renamed ‘time drift’ to <a>time lag</a> and exposed the 3.603 - time lag in the <a>AnimationPlayer</a> interface of 3.604 - the <a href="#programming-interface">programming interface</a>. 3.605 + <li>Removed the ‘time drift’ property of <a>players</a> and 3.606 + redefined play control algorithms in terms of an <a>adjusted start 3.607 + time</a>. 3.608 <li>Introduced <a title="limited">limiting</a> behavior to players so 3.609 that the <a>current time</a> behaves more like a DVD or cassette 3.610 player.
