在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比较（）。