Displaying html element on exact frame in html5 video

Question

I'd like to display some html text over a playing html5 video.

The video will feature an empty sign, and i'd like to place some custom text over the video, so that it appears to be displayed on the sign.

How can I best sync the showing of the html element with a specific frame in a video?

Preferably on the exact frame, so the sync would be perfect.

Answer 1

You could get the time-frame being played in the player.

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);
    });
});

You could round-off the currentTime as per your need to compare in showHTMLElement().