home: fallback for the big flubber?

[rittermo]

Is there any way we could add a GIF or video as a fallback for the big flubber on the home page for browsers which don’t support WebGL 3D?

[vellip]

Do we have a gif?

[rittermo]

No, but here are two videos. Maybe @damusp knows how to make GIFs out of mp4?

5 seconds: https://stage.liqd.net/documents/31/liqd_flubber_video_sehr_kurz.mov

10 seconds: https://stage.liqd.net/documents/33/liqd_flubber_video_kurz.mov

[damusp]

@vellip would you recommend a maximum data size for this? or does it not matter?

[vellip]

just make it as small and good looking as possible

[damusp]

turns out gif is not ideal. i suggest we display a html video instead. i could work down the file size some more and make it loop. whaddaya think?

[rittermo]

@damusp I’m all for it! It would be great to have a loop that plays it back and forth endlessly. I suppose that can be implemented in the player @vellip ? That way the animation never really interrupts/breaks.

[vellip]

Yea, I think that works best. We just have to append the video tag to the canvas like so:

<canvas id="canvas-home" class="home-logo__canvas">
  <video controls loop>
      <source src="movie.mp4" type="video/mp4">
  </video>
</canvas>

[damusp]

cool. I'll upload a loopable mp4 here once it's done

[damusp]

You can find a the looped flubber on nextCloud: Design/liquidDemocracy/flubber/liqd_flubber_loop.mp4

[philli-m]

Is this still required? Flubber is now supported in IE11 and up

[philli-m]

tested on lighthouse with updated version and tests better and browser compatibility is no longer a concern