現在のhtml5ビデオタイムフレームをミリ秒で取得できますか？

Question

私はライブビデオのキャプションエディタを構築しようとしており、JS/DOMが現在のビデオタイムフレームをミリ秒で返すことを要求しています。 DOMによると、video.currentTimeは秒単位で値を返します。とにかく/でミリ秒で値を取得するには？

Answer 1

currentTimeにはミリ秒が含まれます。そう、 24.530629

Answer 2

ontimeupdateイベントがフロート数として表現ミリ秒の割合と数秒であなたのCURRENTTIMEを与える： document.getElementsByTagName('video')[0].currentTime;

あなたは、時間（ミリ秒）を表示し、超えよ、あなたのコンソールを開き、YouTubeの動画を開き、次に入力します。あなたはミリ秒単位の精度が必要な場合は、ここでは1000を乗算する必要があり、それに近づくためにいくつかの方法があります。

1. を追跡低粒度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>

2. しかし、あなたはより頻繁に更新制御をしたい場合は、このような何かsetIntervalまたは​​ソリューションを試すことができるようにtimeupdateイベント間の遅延は、200msのからかなり大きな出発です：

を

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>