是否可以以毫秒为单位获取当前的 html5 视频时间帧? [英] Is it possible to get the current html5 video timeframe with milliseconds?

问题描述

我正在尝试构建一个实时视频字幕编辑器，并要求 JS/DOM 以毫秒为单位返回当前视频时间帧.根据 DOM，video.currentTime 仅以秒为单位返回值.有没有办法以毫秒为单位获取值?

I am trying to build a live video captioning editor and require that the JS/DOM returns the current video timeframe with milliseconds. According to the DOM, video.currentTime only returns the value in seconds. Is there anyway to get the value in/with milliseconds?

推荐答案

ontimeupdate 事件以秒为单位给出当前时间，毫秒分数表示为浮点数，所以如果你想要毫秒精度，你应该乘以 1000. 以下是一些解决方法:

ontimeupdate event gives your currentTime in seconds with milliseconds fraction represented as float number, so if you want milliseconds precision you should multiply by 1000. Here are some ways to approach it:

1. 低粒度timeupdate事件跟踪

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

<video id="video" src="https://www.sample-videos.com/video701/mp4/240/big_buck_bunny_240p_30mb.mp4" width='320' height='240' ontimeupdate="onTimeUpdate(event)" controls='controls' autoplay></video>

1. 但是 timeupdate 事件之间的延迟从 200 毫秒开始就相当大了，所以如果你想要更频繁的更新控制，你可以尝试 setInterval 或 requestAnimationFrame解决方案，如下所示:

1. But delay between timeupdate event is pretty big starting from 200ms, so if you want more frequent update control you can try setInterval or requestAnimationFrame solutions, something like this:

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="https://www.sample-videos.com/video701/mp4/240/big_buck_bunny_240p_30mb.mp4" width='320' height='240' controls='controls' autoplay></video>

这篇关于是否可以以毫秒为单位获取当前的 html5 视频时间帧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！