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.
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.