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

Posted 2023-05-08

【中文标题】如何让视频背景在 iPhone / 手机上播放？

【英文标题】：How to make video backgrounds play on iPhone / mobile?

【发布时间】：2016-01-20 01:16:47

【问题描述】：

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

有没有办法让视频背景也可以在 iPhone 上使用？有哪些可能的解决方法？

我们正在考虑可以在桌面上使用完整的视频动画，然后在移动设备上使用更短的 GIF 版本（它仍在制作动画）。

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

【问题讨论】：

ios 的完整 APNG 或 GIF-89A 解决方案可以在这个问题上找到：***.com/questions/25074340/avanimator-mvid-conversion/…

【参考方案1】：

有很多方法可以达到您所追求的效果。

如果可以接受非常低的帧速率，则使用 GIF 或带有过渡的静态图像序列可能就足够了。

如果运动区域不大，可以使用 spritesheet 动画。如果视频不太长，您甚至可以呈现整个屏幕的视频。您可以为视频添加信箱或以低分辨率显示，以缩小所需的 spritesheet 的大小。

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

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

【参考方案2】：

您不能在移动版 Safari 上使用 html5 视频，因为 iPhone 上禁止播放内嵌视频。您可以在 Chrome for android 上执行此操作，但播放需要有效的用户交互才能开始 (touchstrt)。

剩下的要么是 javascript/CSS 动画，要么是像你提到的动画图像。 APNG 可能会提供比 iOS 上的 GIF 更好的替代方案。

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

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