画布上的视频平移 - 如何解决性能问题（还有：HTML5、Flash 还是其他？）

Question

长版：

我有一个非常特殊的问题。我是一名多媒体艺术家，目前与动画师一起工作 - 我们正在尝试创建一个交互式动画，我希望将其作为网站以及 App Store 和 Android Market 上的免费应用程序在线提供。 但这是我现在面临的关键问题。

实际动画的输出视频的分辨率将很高 - 可能是高清分辨率的 4 倍或更多，但这是有原因的。这个想法是让观看者一次只能观看视频的一部分 - 就像在 Google 地图或任何其他类似画布的视图（例如 MMORPG 或策略电脑游戏）中平移时一样。因此，您一次只能看到整个图像的一部分，然后您可以四处移动以查看“角落后面”的内容。

因此，动画将是一个与 Google 地图类似的画布（平移，如果有足够的时间来实现，可能还可以缩放），但使用视频而不是图像。

出现的一个大问题是性能。我认为让它运行的最佳方法是相应地缩小不同设备的视频。但即使现在只考虑台式电脑 - 高清屏幕缩小到 720p 意味着总共有大约 4 倍 720p 的分辨率，这对于普通计算机来说可能太多而无法解码（全高清通常已经出现问题） - 输出分辨率将超过 4K 标准（5120 x 2880，而 4K 为 4096x2160）。无论如何，这是不可接受的。

但我得出的结论是，解码和渲染视频中用户看不到的部分确实没有意义（为什么要为此浪费 CPU+GPU 时间）——因为我们知道只有大约 1/6 的内容。完整的画布在任何给定时间都是可见的。 这启发了我一个想法，也许我可以将输出视频分成块 - 8 到 64 个文件并排堆叠在一起，就像表格中的单元格一样，然后让时间码计时器在某个变量中播放并按需启用视频块。当用户将画布拖动到可见元素时，它会在从全局变量读取的给定时间码处自动开始播放文件。可能存在一些启发式方法来预测用户移动并过早激活不可见块，以便消除因在视频内搜索并开始播放而导致的任何延迟。然后，不再可见的块可能会在一段时间后自行停用。

因此，我的第一次尝试是尝试看看我在平台方面的选择是什么，我确实认为它归结为：

• HTML5 与 JavaScript（大量使用 标签）
• Adob​​e Flash（使用 Flash Builder将应用程序部署到所有不同的设备）

并且 HTML5 确实更可取。

因此，我做了一些研究，看看是否有可能在 HTML5 中一次同步多个视频。不幸的是，它远非完美，有两个可用的“黑客”可以在 Firefox 中很好地工作，但在 Webkit 中存在错误（视频经常不同步超过几帧，有时甚至长达半秒，这将是如果它是一个分割成块/片段的单个视频，则非常明显）。更不用说我什至没有在移动平台（Android / iOS）上尝试过。

这两种方法/黑客是 Rick Waldron 的同步，如下所示：

http ://weblog.bocoup.com/html5-video-synchronizing-playback-of-two-videos/

另一种也是由 Rick 开发的是 mediagroup.js （这个在 Chrome 中根本不起作用）： https://github.com/rwldrn/mediagroup.js

我的测试：http://jsfiddle.net/NIXin/EQbAx/10/

（我隐藏了控制器，因为由于某种原因，它总是比其他剪辑更早播放）

因此，在解释完所有内容之后，我非常感谢你们提供的任何反馈 - 解决此问题的最佳方法是什么以及在哪个平台上。 HTML5够成熟吗？

简短版本： 如果我仍然没有弄清楚我需要什么 - 想象一下放大到 600% 的视频，这样您就看不到所有内容（有些部分超出了屏幕），并且您需要通过拖动鼠标来平移（或在移动设备上轻弹手指）以查看视频不同位置发生的情况。我怎样才能跨平台做到这一点（让视频流畅运行），同时保持视频的高质量和分辨率？

非常感谢，如果您需要更多详细信息或对此事进行任何澄清，请告诉我。