主页 / coding / 问题 / 77518586
Accepted
Math
Asked: 2023-11-21 04:02:33 +0800 CST

如何连续获取 html-videos 当前时间？

  • 772

我正在尝试在 js 中获取当前时间的视频。我想出了一个相当丑陋且不太精确的解决方案，使用setIntervalon the playevent。但我非常喜欢使用更好的方法。也许requestAnimationFrame可以做到吗？我愿意寻求更好的解决方案。

当前代码：

  this.video = document.createElement('video')
  this.duration = null
  this.currentTime = null

  this.video.addEventListener('play', this.play)

  play(e) {
    setInterval(() => {
      this.currentTime = this.video.currentTime
    }, 1000)
  }
javascript

1 个回答

  1. Best Answer

    我认为您正在寻找的是timeupdate事件。

    例子：

    let video = document.getElementById("video");
let currentTime = null;

video.addEventListener('timeupdate', timeUpdate);

function timeUpdate(e) {
  currentTime = e.target.currentTime;
  console.log("Time: " + currentTime);
}
    <video id="video" width="400" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

    • 2

相关问题