javascript - Chrome 中的 HTML5 视频当前时间重绘问题

Question

我一直在努力解决这个问题。查看我的故事，以及下面的代码笔:

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

我的问题是 Chrome 的性能不佳。出于某种原因，效果非常不稳定，实际上 react 迟钝。如果您在 Firefox 中运行它，性能会好很多(尽管仍然有点不稳定)。

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

我比较了视频质量，它们是相同的 FPS (~30fps)。与原始视频 (6mpbs) 相比，Apple 的视频具有更高的分辨率和更高的比特率 (10mbps)。但我假设如果我所做的只是更改当前时间，那么 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。

除了更长(约 7 秒对 apple.mp4 4 秒和 space.mp4 1 秒)之外，sky4.mp4 是三个使用 H.264 High profile 编码的唯一一个；另外两个使用主配置文件。 High profile 需要更多计算，因此如果您使用 H.264 Main 对其重新编码，您可能会获得更快的性能。不过，该性能可能取决于平台。当然，Main profile 在质量/位方面效率较低。

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

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

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

这要求视频从与其所在的网页相同的域加载，或者使用 CORS header 提供视频，以便将其用作 Canvas 的图像源。

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