我一直在试着想出这个问题。看看我的传奇和下面的代码：
我正在玩一些HTML5视频currentTime javascript效果。特别是这个将currentTime绑定到圆的角度和使用d3.js创建的鼠标位置。
我的问题是Chrome中的效果不佳。由于某种原因，效果非常不稳定，实际上没有反应。如果你在Firefox中运行它，性能会好很多（虽然仍然有点不稳定）。
现在，我认为它与视频质量有关。太穷了吗？为了比较，在src中将“sky4.mp4”替换为“apple.mp4”。这是我从Apple的iPhone6网站（https://www.apple.com/iphone-6/）中提取的一个视频，它的质量非常高，而且这两种浏览器的效果实际上都比较顺畅。
我比较了视频质量，它们是相同的FPS（~30fps）。 Apple的视频分辨率更高，比原始（6mpbs）更高的比特率（10mbps）。但我假设如果我所做的只是改变当前时间，那么FPS应该是唯一重要的事情吗？
我猜不是，因为替换src文件并查看“space.mp4”。这是一个非常低质量的视频（15fps，非常低的分辨率和130 kbps）。它在Chrome和Firefox上都运行得非常流畅。
这里发生了什么？为什么我的平庸质量视频在低质量和高质量的视频中无效？任何人都可以对此有所了解吗？ http://codepen.io/jayventura/pen/EaweaJ
(code to make stackoverflow happy)
答案 0 :(得分：1)
他们对我来说都很慢，可能是因为我的机器比较旧/较慢。但是我注意到在sky4.mp4中跳跃比其他两个使用更多的CPU。
除了更长（对于apple.mp4约为7秒vs 4秒，对于space.mp4为1秒），sky4.mp4是用H.264 High profile编码的三个中唯一一个;另外两个使用Main配置文件。高配置需要更多计算，因此如果使用H.264 Main重新编码，可能会获得更快的性能。但是，这种性能可能取决于平台。当然，主要配置文件效率较低，质量/位数较低。
它更长的事实也可能成为一个问题。由于（我假设）您将视频的整个长度映射到圆圈的360度，因此移动光标相同的数量将通过更长的视频移动更多的视频帧。
视频格式应从头到尾播放;跳来跳去玩是非常低效的。所以你可以做的另一件事是尝试将整个视频预呈现为一堆画布元素。我不想用长视频和高视频的视频来做这个，但我用小视频完成了。
将视频元素设置为屏幕外，创建相同大小的2D画布元素。将视频元素的currentTime设置为第一帧，等待其onseeked事件，然后将视频绘制到画布。创建另一个画布并重复下一帧，依此类推。然后，您可以立即显示任何画布显示您需要的框架。
这要求视频从与其所在网页相同的域加载，或者使用CORS标头提供，以便将其用作画布的图像源。
另一个困难是JavaScript找不到视频的帧速率没有好办法。但是，如果您只使用自己的视频执行此操作，则可以了解帧速率。