Chrome 中的 HTML5 视频 currentTime 重绘问题

Question

我一直在努力解决这个问题。看看我的传奇故事和下面的 codepen：

我正在玩一些 HTML5 视频 currentTime javascript 效果。这个特别将 currentTime 绑定到圆的角度和鼠标位置，使用 d3.js 创建。

我的问题是 Chrome 的性能不佳。由于某种原因，效果非常不稳定，实际上反应迟钝。如果你在 Firefox 中运行它，性能会好很多（尽管还是有点不稳定）。

现在，我认为这与视频质量有关。是不是太穷了？为了比较，将 src 中的“sky4.mp4”替换为“apple.mp4”。这是我从 Apple 的 iPhone6 网站 (https://www.apple.com/iphone-6/) 中提取的视频，它的质量非常高，而且效果实际上在两种浏览器上都运行得更加流畅。

我比较了视频质量，它们是相同的 FPS (~30fps)。 Apple 的 vid 具有比原始视频 (6mpbs) 更高的分辨率和更高的比特率 (10mbps)。但我假设如果我所做的只是改变 currentTime，那么 FPS 应该是唯一重要的事情？

我猜不是，因为替换 src 文件并检查“space.mp4”。这是一个质量非常低的视频（15fps、非常低的分辨率和 130 kbps）。它在 Chrome 和 Firefox 上运行都非常流畅。

这里发生了什么？为什么我的质量一般的视频无法使用这种效果，而低质量和高质量的视频却可以？任何人都可以对此有所了解吗？ http://codepen.io/jayventura/pen/EaweaJ

(code to make stackoverflow happy)

Answer 1

它们对我来说都很慢，可能是因为我的机器较旧/较慢。但我注意到在 sky4.mp4 中跳转会比其他两个使用更多的 CPU。

除了更长（Apple.mp4 为 7 秒，而 space.mp4 为 1 秒）之外，sky4.mp4 是三个使用 H.264 High profile 编码的唯一一个；另外两个使用主配置文件。 High profile 需要更多计算，因此如果使用 H.264 Main 重新编码，您可能会获得更快的性能。不过，这种性能可能取决于平台。当然，主要配置文件效率较低，质量/位明智。

它更长的事实也可能是一个问题。由于（我假设）您将视频的全长映射到圆的 360 度，移动光标相同的量将移动视频的更多帧和更长的视频。

视频格式旨在从头到尾播放；跳来跳去和向后打是非常低效的。所以你可以做的另一件事是尝试将整个视频预渲染到一堆画布元素。我不想用既长又高分辨率的视频来做这件事，但我已经用小视频做了。

在视频元素离屏的情况下，创建一个相同大小的 2D 画布元素。将视频元素的 currentTime 设置为第一帧，等待其 onseeked 事件，然后将视频绘制到画布上。创建另一个画布并为下一帧重复，依此类推。然后，您可以立即显示显示您需要的框架的任何画布。

这要求视频从与其所在的网页相同的域加载，或者使用允许将其用作画布的图像源的 CORS 标头提供。

另一个困难是 JavaScript 没有很好的方法来找出视频的帧速率。但是，如果您只对自己的视频执行此操作，您就会知道帧速率。