问题描述
限时送ChatGPT账号..我正在尝试构建一个实时视频字幕编辑器,并要求 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:
timeupdate
事件跟踪
window.onTimeUpdate = (e) => {
console.log(Math.round(e.target.currentTime * 1000));
};
<video id="video" src="https://www.sample-videos/video701/mp4/240/big_buck_bunny_240p_30mb.mp4" width='320' height='240' ontimeupdate="onTimeUpdate(event)" controls='controls' autoplay></video>
但是 timeupdate
事件之间的延迟从 200 毫秒开始就相当大了,所以如果你想要更频繁的更新控制,你可以尝试 setInterval
或 requestAnimationFrame
解决方案,如下所示:
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/video701/mp4/240/big_buck_bunny_240p_30mb.mp4" width='320' height='240' controls='controls' autoplay></video>
这篇关于是否可以以毫秒为单位获取当前的 html5 视频时间帧?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论