轮播上的视频和文字答案

【问题标题】：Video and Text on carousel轮播上的视频和文字
【发布时间】：2017-10-05 15:14:11
【问题描述】：

我正在做一个项目，我正在尝试弄清楚这家公司 http://weareroyale.com 是如何设法在其主页上执行视频横幅的...

我可以看到有一个动画，我可以看到文本似乎是使用透明 PNG 输入的，但我似乎无法弄清楚它们是如何获得正确时间的？

我的意思是，文字出现在视频的特定部分，但他们如何把握好时机？我原以为加载 PNG 会比开始播放视频更快，我想你可以允许这样做，但每个用户的加载速度也会不同......

所以，我想知道是否有人知道它是如何创建的？它是一个滑块插件吗？从头开始创建？等等等等？

【问题讨论】：

video.currentTime 和 svg's
谢谢@avrilalejandro - 这是JavaScript吗？我猜想，如果该功能可以跟踪视频的时间，那么我们可以创建动作以在某些时间戳中触发，从 display:none 更改 div（或 PNG）；当我们希望它们显示时 - 这是正确的吗？
你会不会碰巧知道任何学习这方面的好资源？ :)
是的。只有 JS...w3schools.com/graphics/svg_text.aspwww.html5rocks.com/en/tutorials/video/basics/#toc-jsprop
非常感谢@avrilalejandro，如果您想将其作为答案，我会将其标记为正确

标签： jquery html css video

【解决方案1】：

var video = document.getElementById('video');
//video.load();
video.play();
video.addEventListener("timeupdate", function() {
  if (this.currentTime >= 2.000 && this.currentTime <= 8.000){
    this.pause();
    document.getElementById('text').innerHTML=this.duration;
  }
}, false);

<video width="400" id="video" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p id="text"></p>

【讨论】：