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

您可以根据需要在showHTMLElement（）中进行比较来舍入当前时间。