Just put another HTML element, like a div, in front of the video element.
You can use JS to get a list of all annotations from your DB, then generate the HTML element on the fly when the video element plays a certain time-span. Use CSS to push the annotation to the position you need.
It'll either use a <canvas> or something to do with <svg> . Canvas is the easiest method to draw/overlay information onto an image or video.
T
TheSheriff
Co-Founder, Founder, Entrepreneur & Problem Solver
Hipkiss Well, the OP asked for the video element, and just using margin-top: -100px will move any element below it on top of it - and you can use full HTML and CSS functionalities (like hover, links, etc.) without slow JS. It's something even designers without programming experience can do :)
Marco Alka
Software Engineer, Technical Consultant & Mentor
Just put another HTML element, like a div, in front of the video element.
You can use JS to get a list of all annotations from your DB, then generate the HTML element on the fly when the video element plays a certain time-span. Use CSS to push the annotation to the position you need.