2

We are planning to use After Effects video as our banner / hero image as our animation sequence is a bit complex. However, when we've seen examples of websites using this technique, the iPhone / mobile versions are static.

Is there a way to make the video backgrounds work on iPhone also? What are the possible workarounds?

We're thinking that we can use the full video animation on desktop and then have a shorter GIF version for mobile (it's still animating).

Or are there other ways to achieve this?

fabianmoronzirfas
  • 4,091
  • 4
  • 24
  • 41
catandmouse
  • 11,309
  • 23
  • 92
  • 150
  • A complete APNG or GIF-89A solution for iOS can be found at this question: https://stackoverflow.com/questions/25074340/avanimator-mvid-conversion/25478854#25478854 – MoDJ Aug 14 '16 at 20:14

2 Answers2

0

There are many ways to achieve the sort of effect you're after.

  • If a very low frame rate is acceptable, using a GIF or sequence of static images with transitions may be good enough.

  • If the areas of movement are not huge, you can use spritesheet animation. You might even be able to present video for the whole screen if it isn't too long. You can letterbox the video or present it in low resolution scaled up to reduce the size of the spritesheet needed.

  • You can use a combination of panning backgrounds and moving sprites to create a dynamic video background. Particle effects, lighting effects, all the things the GPU does in real time games can be applied to make the menu background look like video.

  • In theory you might be able to port OpenH264 to your target platforms and play video natively, but that's probably beyond the scope of what you want to do.

Jude Hungerford
  • 80
  • 7
0

You can't use HTML5 video for that with mobile Safari as playback of inline video is prohibited on iPhone. You could do it on Chrome for Android but playback would require a valid user interaction to start (touchstrart).

You are left with either JavaScript/CSS animations or like you mentioned animated images. APNG may provide a better alternative that GIF on iOS.

I have seen other solutions but none provide a decent user experience - a static image may not be a bad idea if you do not want to spend too much time on it.

Note: if you are building an App you can play inline video on iPhone. The restriction is only for mobile Safari.

Arnaud Leyder
  • 6,674
  • 5
  • 31
  • 43