如何让视频背景在iPhone /手机上播放？

Question

我们计划使用After Effects视频作为我们的横幅/英雄图像，因为我们的动画序列有点复杂。但是，当我们看到使用这种技术的网站的例子时，iPhone /手机版本是静态的。

有没有办法使iPhone上的视频背景也可以使用？什么是可能的解决方法？

我们认为我们可以在桌面上使用完整的视频动画，然后使用较短的GIF版本进行移动（它仍然具有动画效果）。

还有其他方法可以实现吗？

Answer 1

有许多方法可以实现您所追求的效果。

• 如果帧速率非常低是可以接受的，那么使用带有转换的GIF或静态图像序列可能就足够了。

• 如果移动区域不是很大，可以使用spritesheet动画。如果它不太长，您甚至可以为整个屏幕呈现视频。您可以对视频进行信箱显示或以低分辨率放大显示，以缩小所需的spritesheet的大小。

• 您可以使用平移背景和移动精灵的组合来创建动态视频背景。粒子效果，灯光效果，GPU在实时游戏中所做的所有事情都可以用于使菜单背景看起来像视频。

• 从理论上讲，您可能能够将OpenH264移植到您的目标平台并本机播放视频，但这可能超出了您想要的范围。

Answer 2

您不能在移动Safari上使用HTML5视频，因为在iPhone上禁止播放内联视频。您可以在Android版Chrome上执行此操作，但回放需要启动有效的用户互动（touchstrart）。

您只剩下JavaScript/CSS动画或像您提到的动画图像一样。 APNG可能会提供iOS上GIF的更好选择。

我已经看到其他的解决方案，但没有提供一个体面的用户体验 - 静态图像可能不是一个坏主意如果你不想花太多时间在它上面。

注意：如果您正在构建应用程序，则可以在iPhone上播放内嵌视频。限制只适用于移动Safari。