javascript - 如何在视频以JavaScript结尾之前隐藏文本

当用户单击播放按钮（4秒）时，我正在显示视频和文本。所以我的代码看起来像这样：

$('video').on('play', function (e) {
      $('#showText').delay(4000).show(0);
    });

我要实现的目标是在视频结束前5秒钟隐藏此文本（#showText）。我没有找到任何解决方案，因此，如果有人可以提供帮助，我将不胜感激。

最佳答案

为此，您可以使用与媒体元素关联的标准事件。特别是play和timeupdate。您已经介绍过的前者。后者随着回放的进行而触发。您可以使用它来检查当前位置，并确定距离终点是否少于5秒，如下所示：

var $showText = $('#showText');

$('video').on({
  play: function() {
    $showText.delay(4000).show(0);
  },
  timeupdate: function(e) {
    if ((this.duration - this.currentTime) < 5 && $showText.is(':visible'))
      $showText.hide();
  }
});

#showText {
  display: none;
}

video {
  height: 175px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="showText">Lorem ipsum</p>
<video autobuffer controls autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>