有什么方法可以在寻求HTMLMediaElement之前获得当前时间值？

发布于 2025-02-12 06:28:44 字数 1583 浏览 1 评论 0原文

假设我们的应用程序正在Safari上使用默认视频播放器。

当用户播放视频，然后尝试使用Seek Bar移至视频的不同位置时，似乎暂停事件首先触发，然后我们将获得seeking和搜索已发射的事件。

我想知道我们是否可以在搜索之前获得currentime值。代码> t = 42 使用seek bar，我想以某种方式获得7作为currenttime值。

我希望我们可以通过访问currenttime属性 pause 事件处理程序来获得此值，该属性如下：

const video = document.querySelector('#myvideo');
video.addEventListener('pause', () => {
  // I expected that the `video.currentTime` here has the "previous" position,
  // but it already points to the new position
  console.log(video.currentTime);
});

但是不幸的是，不幸的是currentValue < /code>当时已经更新为新值。

有什么好方法可以实现吗？

（编辑）缓存currenttime手动无济于事，因为显然是timeupdate事件在暂停事件之前发射。更具体地说，以以下代码为例，当用户尝试跳到另一个位置时，cache和currentime 暂停> pape 处理程序似乎总是相同的。

<!DOCTYPE html>
<html>
  <body>
    <video
      id="myvideo"
      width="640"
      height="360"
      controls
      src="video.mp4"
    ></video>
  </body>
  <script>
    const video = document.querySelector("#myvideo");
    let cache = 0;

    video.addEventListener("timeupdate", () => {
      cache = video.currentTime;
    });

    video.addEventListener("pause", () => {
      console.log({ cache, currentTime: video.currentTime });
    });
  </script>
</html>

原文

Let's say our app is using the default video player on Safari.

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 pause event is fired first, and then we'll get seeking and seeked events fired.

I am wondering if we can get the currentTime value prior to the seek. For instance, assuming that a user jumps from t = 7 to t = 42 using the seek bar, I want to get 7 as the currentTime value somehow.

I expected that we could get this value by accessing currentTime property inside the pause event handler that is invoked right after the seek like the following:

const video = document.querySelector('#myvideo');
video.addEventListener('pause', () => {
  // I expected that the `video.currentTime` here has the "previous" position,
  // but it already points to the new position
  console.log(video.currentTime);
});

but unfortunately the currentValue was already updated to the new value at that point.

Is there any good way to achieve it?

(EDIT)
Caching currentTime manually doesn't help, because apparently a timeupdate event fires before a pause event. More specifically, taking the following code as an example, when a user attempts to jump to another position, cache and currentTime printed within the pause handler seem always identical.

<!DOCTYPE html>
<html>
  <body>
    <video
      id="myvideo"
      width="640"
      height="360"
      controls
      src="video.mp4"
    ></video>
  </body>
  <script>
    const video = document.querySelector("#myvideo");
    let cache = 0;

    video.addEventListener("timeupdate", () => {
      cache = video.currentTime;
    });

    video.addEventListener("pause", () => {
      console.log({ cache, currentTime: video.currentTime });
    });
  </script>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪漫人生路 2025-02-19 06:28:50

我认为@kaiido在说“高速缓存两个值” 。
时的意思是
代码未经测试（但看起来比在评论部分中保存更好）

<script>
    const video = document.querySelector("#myvideo");
    let cache = 0;
    let cache_prev = 0;

    video.addEventListener("timeupdate", () => {
      cache_prev = cache; //# save last known value
      cache = video.currentTime; //# before updating to new currentTime
    });

    video.addEventListener("pause", () => {
    console.log("cache_prev : " + cache_prev );
    console.log("cache : " + cache );
    console.log("currentTime : " + video.currentTime );
    });
</script>

I think @Kaiido means this when saying "Cache two values".
Code is untested (but looks better than being kept in comments section)

<script>
    const video = document.querySelector("#myvideo");
    let cache = 0;
    let cache_prev = 0;

    video.addEventListener("timeupdate", () => {
      cache_prev = cache; //# save last known value
      cache = video.currentTime; //# before updating to new currentTime
    });

    video.addEventListener("pause", () => {
    console.log("cache_prev : " + cache_prev );
    console.log("cache : " + cache );
    console.log("currentTime : " + video.currentTime );
    });
</script>

回复收藏 0 原文

~没有更多了~