title: Any way to get a currentTime value prior to the seek on HTMLMediaElement?
body: <p>Let's say our app is using the default video player on Safari.</p>
  <p>When a user is playing a video and then attempts to move to a different position of the video using the seek bar, it seems like <code>pause</code> event is fired first, and then we'll get  <code>seeking</code> and <code>seeked</code> events fired.</p>
  <p><strong>I am wondering if we can get the <code>currentTime</code> value prior to the seek.</strong> For instance, assuming that a user jumps from <code>t = 7</code> to <code>t = 42</code> using the seek bar, I want to get <code>7</code> as the <code>currentTime</code> value somehow.</p>
  <p>I expected that we could get this value by accessing <code>currentTime</code> property inside the <code>pause</code> event handler that is invoked right after the seek like the following:</p>
  <pre class="lang-js prettyprint-override"><code>const video = document.querySelector('#myvideo');
  video.addEventListener('pause', () =&gt; {
    // I expected that the `video.currentTime` here has the &quot;previous&quot; position,
    // but it already points to the new position
    console.log(video.currentTime);
  });
  </code></pre>
  <p>but unfortunately the <code>currentValue</code> was already updated to the new value at that point.</p>
  <p>Is there any good way to achieve it?</p>
  <p>(EDIT)
  Caching <code>currentTime</code> manually doesn't help, because apparently a <code>timeupdate</code> event fires before a <code>pause</code> event. More specifically, taking the following code as an example, when a user attempts to jump to another position, <code>cache</code> and <code>currentTime</code> printed within the <code>pause</code> handler seem always identical.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;video
        id=&quot;myvideo&quot;
        width=&quot;640&quot;
        height=&quot;360&quot;
        controls
        src=&quot;video.mp4&quot;
      &gt;&lt;/video&gt;
    &lt;/body&gt;
    &lt;script&gt;
      const video = document.querySelector(&quot;#myvideo&quot;);
      let cache = 0;
  
      video.addEventListener(&quot;timeupdate&quot;, () =&gt; {
        cache = video.currentTime;
      });
  
      video.addEventListener(&quot;pause&quot;, () =&gt; {
        console.log({ cache, currentTime: video.currentTime });
      });
    &lt;/script&gt;
  &lt;/html&gt;
  
  </code></pre>