我如何在3s视频的特定帧上执行DOM操作？

Question

我需要在页面加载时连续生成由25帧组成的图像。每帧显示150ms。在第20帧上，我希望html元素（一个倒数计时器）出现在视频的特定位置上（白框）。.我希望在页面加载后立即以100％的视口宽度运行此视频。

到目前为止，我有几种选择：

1. 将图像编码为视频并将其托管在vimeo上。我认为限制将是视频在不同的浏览器上加载需要花费不同的时间。因此，也许我可以在屏幕上以定义的比例观看特定的像素（用于移动设备等），并且当它变成白色时，我将显示倒计时（甚至可以吗？）。有利的是，回放将始终保持流畅。

2. 我以编程方式使用javascript和一些基本的setTimeout逻辑加载每个图像。问题是我认为事件循环的工作方式意味着setTimeout不够可靠。并且图像不能流畅播放，尤其是在第一次加载时。我真的看到他们在关闭缓存的情况下重新加载页面时越过了整个动画。我将所有25张图像都放在页面顶部的display:none div中，希望它们可以预加载但没有运气。它仍然有故障。

3. 还有更好的方法吗？也许格林索克？我真的不确定该如何处理。我需要图像进行预加载，但需要隐藏，然后使用javascript逻辑以150ms的速度平稳运行25帧而不会出现毛刺。并且能够在正好20帧处插入dom元素。

任何建议或任何其他建议将不胜感激。

Answer 1

您可以使用videojs-markers库在视频中添加标记。它包含一个回调方法onMarkerReached，可用于启动倒计时。

您的代码将如下所示：

<video id="demo" controls class="video-js vjs-default-skin">
   <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
   <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>  

var player = videojs('demo');
player.markers({
    markers: [
       {time: 3, text: ""}
    ],
    onMarkerReached: function(marker) {
        // start your timer
    },
});