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

Question

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

有没有办法让视频背景也适用于iPhone？有哪些可行的解决方法？

我们认为我们可以在桌面上使用完整的视频动画，然后为移动设备提供更短的GIF版本（它仍然是动画）。

或者还有其他方法可以实现这一目标吗？

Answer 1

有很多方法可以达到你想要的那种效果。

• 如果帧速率非常低，可以使用带有转场的GIF或静态图像序列。

• 如果移动区域不大，您可以使用spritesheet动画。如果时间不长，您甚至可以为整个屏幕显示视频。您可以将视频信箱或以低分辨率放大显示，以减小所需精灵的大小。

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

• 理论上，您可以将OpenH264移植到目标平台并以原生方式播放视频，但这可能超出了您想要做的范围。

Answer 2

您无法在移动版Safari中使用HTML5视频，因为iPhone上禁止播放内嵌视频。你可以在Chrome for Android上进行，但播放需要有效的用户互动才能启动（touchstrart）。

您可以使用JavaScript / CSS动画或者您提到的动画图像。 APNG可能会为iOS上的GIF提供更好的替代方案。

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

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