Question

我正在尝试构建一个实时视频字幕编辑器，并要求JS / DOM以毫秒为单位返回当前视频时间范围。根据DOM，video.currentTime仅以秒为单位返回值。无论如何都要以毫秒为单位获取值？

Answer 1

currentTime包括毫秒。打开YouTube视频，打开控制台，然后输入 fmt.Println

你会看到毫秒及以后的时间： document.getElementsByTagName('video')[0].currentTime;

Answer 2

ontimeupdate事件以秒为单位给出currentTime，毫秒分数表示为浮点数，因此如果你想要毫秒精度，你应该乘以1000.以下是一些方法：

使用低粒度timeupdate事件跟踪

window.onTimeUpdate = (e) => {
  console.log(Math.round(e.target.currentTime * 1000));
};

<video id="video" src="http://techslides.com/demos/sample-videos/small.mp4" width='320' height='280' ontimeupdate="onTimeUpdate(event)" controls='controls' autoplay></video>

但timeupdate事件之间的延迟从200ms开始相当大，所以如果您想要更频繁的更新控制，可以试试setInterval或requestAnimationFrame解决方案，如下所示：

var reqId;

var startTracking = function() {
  console.log(Math.round(video.currentTime * 1000));
  reqId = requestAnimationFrame(function play() {
    console.log(Math.round(video.currentTime * 1000));
    reqId = requestAnimationFrame(play);
  });
};

var stopTracking = function () {
  if (reqId) {
    cancelAnimationFrame(reqId);
  }
};

video.addEventListener('play', startTracking);

video.addEventListener('pause', stopTracking);

<video id="video" src="http://techslides.com/demos/sample-videos/small.mp4" width='340' height='280' controls='controls' autoplay></video>

是否有可能以毫秒获得当前的html5视频时间范围？

2 个答案: