在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（）中四舍五入currentTime。