html5 비디오의 정확한 프레임에 html 요소 표시

Question

재생중인 html5 비디오 위에 일부 html 텍스트를 표시하고 싶습니다.

동영상에 빈 기호가 표시되며 동영상에 맞춤 텍스트를 추가하여 기호에 표시되는 것처럼 보입니다.

html 요소의 표시를 동영상의 특정 프레임과 가장 잘 동기화하려면 어떻게해야합니까?

정확한 프레임에 가급적이면 동기화가 완벽 할 수 있습니다.

Answer 1

플레이어에서 재생되는 시간 프레임을 얻을 수 있습니다.

HTML :

<video 
    id="videoPlayer" 
    controls="controls"> 
    <source src="video.mp4" type="video/mp4"> 
</video> 

JQuery와 :

$(document).ready(function(){ 
    $("#videoPlayer").on(
    "timeupdate", 
    function(event){ 
     showHTMLElement(this.currentTime, this.duration); 
    }); 
}); 

당신은 라운드 오프 currentTime을 할 수 showHTMLElement에 비교하는 당신의 필요에 따라().