Javascript HHTML5视频滚动-视频编码问题

有一种神奇的方法可以使用鼠标滚动来控制html5视频的帧，非常简洁

原件：

很抱歉，您的浏览器不支持该元素

我的问题是，当应用到我的视频时，Chrome和Firefox上的执行非常“有缺陷/不稳定”，我尝试了很多不同的编码选项，但迄今为止没有成功，请参见代码笔：

我的视频：

有人知道怎么解决这个问题吗？可能是编码选项

---

干杯

我的猜测是，这将与视频的长度有关-他们的样本似乎比你的长得多，因此定位事物的数学可以更精细，因为它有更多的帧来工作这是我的第一个猜测，但是改变这个数字并不能解决渲染问题。重要的是：它在Safari中渲染得非常完美。我也有同样的问题。在Safari中，所有视频的渲染都很平滑，但在Chrome/Firefox中，这些视频的渲染都很不稳定。根据我的研究，它与视频的编码有关。《纽约时报》有一个很棒的交互式视频，可以在所有浏览器中流畅地滚动播放。使用这个视频（mp4），我没有问题。我也尝试过其他例子，但无法找出在Chrome和Firefox中成功编码视频所需的条件。

<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload"><source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://dehsigner.com.br/download/animacao_2mb.mp4"></source>