Chrome中HTML5视频的currentTime重绘问题

Question

我一直在苦苦思索这个问题。请查看下面的故事和Codepen：

我正在尝试使用一些 HTML5 的视频 currentTime JavaScript 特效。特别是这一个将 currentTime 绑定到由 d3.js 创建的圆形的角度和鼠标位置上。

我的问题是在 Chrome 中性能很差。由于某种原因，该特效非常卡顿，实际上无法响应。如果在 Firefox 中运行它，性能会好得多（虽然仍然有点卡顿）。

现在，我认为问题出在视频质量上。它太差了吗？为了进行比较，请使用 "apple.mp4" 替换 src 中的 "sky4.mp4"。这是我从 Apple 的 iPhone6 网站（https://www.apple.com/iphone-6/）下载的视频，它的质量非常高，并且在两个浏览器中都能更加流畅地运行。

我比较了视频质量，它们的 FPS 相同（~30fps）。Apple 的视频具有更高的分辨率，以及更高的比特率（10mbps），而原始视频则为（6mpbs）。但我认为如果我只是更改 currentTime，那么 FPS 应该是唯一重要的因素，不是吗？

但事实并非如此，因为替换 src 文件并查看 "space.mp4"。这是一个非常低质量的视频（15fps，非常低的分辨率和 130 kbps）。在 Chrome 和 Firefox 中都可以很流畅地运行。

这里到底发生了什么？为什么我的中等质量视频无法与此特效配合使用，而低质量和高质量视频可以？谁能为我解答一下？ http://codepen.io/jayventura/pen/EaweaJ

(code to make stackoverflow happy)

- John Vu

---

我看了一下CodePen，但是你的Dropbox视频在Chrome控制台中抛出了“Failed to load resource: net::ERR_CONNECTION_REFUSED”错误。你能否使用不需要身份验证的链接？ - TimHayes

Answer 1

对我来说，它们都相当缓慢，可能是因为我的机器比较老旧/速度较慢。但我注意到，在sky4.mp4中跳跃会比其他两个文件使用更多的CPU。

除了长度较长（与apple.mp4和space.mp4相比分别为7秒vs 4秒和1秒），sky4.mp4是这三个文件中唯一使用H.264 High profile进行编码的文件；另外两个文件使用Main profile。High profile需要更多的计算，因此如果您使用H.264 Main重新编码，则可能会获得更快的性能。然而，这种性能可能取决于平台。当然，Main profile在质量/比特方面效率较低。

长度较长也可能是一个问题。由于（我假设）您正在将视频的整个长度映射到圆的360度上，因此移动相同的光标量将通过更多帧的视频移动。

视频格式是用于从开始到结束播放的；跳跃和倒放非常低效。因此，您可以尝试将整个视频预渲染到一堆画布元素中。我不想使用既长又高分辨率的视频进行此操作，但我已经用过小型视频。

使用视频元素不可见时，创建一个大小相同的二维画布元素。将视频元素的currentTime设置为第一帧，等待其onseeked事件，然后将视频绘制到画布上。创建另一个画布并重复此过程以获取下一帧，以此类推。然后你可以立即展示任何显示所需帧的画布。

这需要视频从与网页相同的域加载，否则需要使用允许其作为画布图像源使用的CORS标头进行服务。

另一个困难是JavaScript无法很好地找出视频的帧率。但是，如果你只是在自己的视频中做这个，你知道帧率。

- aldel

---

真的吗？0_o :/ - Flash Thunder