
A Polymer element for flexible GIF playback - geelen
http://geelen.github.io/x-gif
======
TheSoftwareGuy
I kind of feel like .gif's as a format need to die, and this really
demonstrates why, in my opinion. this page demonstrates a way to add
stop/start abilities to a gif, as well as syncronized audio, which is
literally what a video is but without all the ability for compression and
support for more than 256 colors.

~~~
derefr
> which is literally what a video is

People don't _really_ want GIFs; what people _want_ are filesize-limited,
auto-playing-but-only-while-visible, auto-looping, and silent-by-default
videos. Let's call these "animated images."

The problem is thus: you're designing a piece of forum software, and you're
considering whether to allow people to embed various elements in their posts.

There's problems with allowing people to embed arbitrary videos: they can
steal bandwidth, slow the browser to a crawl, make sudden noises, play to
completion while the tab is in the background, etc.

But if you allow people to embed static images, then there's no _additional_
consideration required in allowing them to embed animated images. Wherever a
static image works, an animated one works.

Right now, there are two ways to allow people to embed animated images: either
you allow .gif as an image upload format, and then display it without
processing--or you allow videos, but do quite a bit of server-side processing
(of the kind Vine and Facebook do) to make the result into an animated image.

If there was an _adapter format_ \-- some simple file format that:

1\. referred to a video by URL (maybe it could be an HTML5 document whose root
is a <video> element?), which would then be embedded in place of the metafile;

2\. whose media type fell under the image/* hierarchy;

3\. and for which the browser would automatically enforce "animated image"
semantics,

then that format would be a perfect replacement for GIFs.

~~~
teraflop
All of those criteria are satisfied by a <video> element with the "muted"
attribute set, plus a little bit of JS if you want to be able to pause the
video when it's scrolled out of view or the user is looking at a different
tab.

I don't buy the argument about stealing bandwidth. A 50MB GIF is just as much
of a bandwidth leech as a 50MB MP4.

~~~
derefr
It's the image-hosting ecosystem. An animated image format needs to be
accepted for upload by public image-hosts; it needs to keep its animated-image
semantics when hotlinked and displayed "raw" by a browser; and it needs,
_needs_ to work when hotlink-embedded inside an <img src=""> element.

These are all things that are true of GIFs, and aren't true of any other video
format. (And this doesn't even address the fact that many people use GIFs for
the combination of animation _and transparency_ , which <video> doesn't
currently offer.)

The image-hosting ecosystem also naturally deals with the bandwidth-drain
issue: image-hosts don't want their bandwidth stolen either, so they have a
cap on upload sizes. By allowing just <img src=""> embedding, you naturally
lean on the image-hosting ecosystem's bandwidth economics to protect your
users.

By allowing arbitrary <video> embedding, though, you invite the nascent
_video-hosting ecosystem_ , which has achieved a different balance: far looser
bandwidth limits, but far stricter caps on concurrent requests (e.g. the
Dropbox-Public-folder model.)

------
jergason
Glen gave an incredible presentation at Mountain West JS about his adventures
doing cool things with gifs. He ended up with bpm syncing between gifs and
music. You should definitely check out the talk when the videos get posted on
Confreaks.

------
Sir_Cmpwn
Alternatively, ditch GIFs entirely and use bandwidth-friendly and feature-
friendly HTML5 video.

~~~
kennywinker
Not gonna happen until html5 can be set up to autoplay on mobile, and can be
copy-pasted into your messaging app and will autoplay there too. I suspect
there are other requirements, but much as I love the idea of moving away from
gifs (for bandwidth at LEAST) there are a set of things that only gifs can do.

Side note: autoplaying html5 would be a massive annoyance, because html5 video
can have audio.

~~~
ivanca
You know mobile devices have audio controls right? And many android devices
have a separated audio control for the browser/content and for the critical
stuff (ringtones/notifications)

~~~
nmeofthestate
I would disable any auto-playing audio technology on my Android phone;
accessing the media volume control is such a huge pain in the arse - multiple
taps and drags to rummage into the Settings and get to it.

NB: the hardware controls only set the ringtone volume, unless you're too late
and the phone is already playing media†.

†hopefully - sometimes the hardware volume buttons still don't control media
volume even when media is playing.

(You can get widgets to control the various volumes, but I've not found one I
really liked).

~~~
sp332
When you click the volume control, it brings up your ringer volume. At the
right-hand side of the volume control is a settings button. That button will
bring up all your volumes in a little floating bubble, so you can always
change any volume in one click + 2 taps, and no "rummaging".

~~~
nmeofthestate
Hmm... I see no sign of this button on Android 4.4.2.

~~~
sp332
Huh, maybe it's a side-effect of some mod I'm running. Didn't expect that.

------
feelstupid
I can understand the need for lowered bandwidth, but the need for better
cross-browser and cross-platform support is more important.

For example; Github README files, we can insert a GIF of a screencast, but
obviously we can't run our own JS, CSS, or embed video. There is where GIFs
are the only option, unless of course you want to redirect to an external
site, but for small repos it's overkill.

The other issue, is saving and sharing. How many people have a folder full of
GIFs? Has anyone tried saving a GIF from the polymer element? As you can
imagine, it saves a frame, which makes it useless. Sure, you can add a button
to Download a compiled version or the original, but why should we add custom
controls when everyone knows Right Click Save As?

For me, cross platform compatibility without requiring an extra file (HTML to
actually play) per GIF if more important than filesize and bandwidth.
Bandwidth is obviously costly, but maybe the issue is knowing when to create a
GIF and when to create a video instead, why is the issue with the playback why
not emphasise on the creation size?

------
ilovecookies
A pretty good idea but having an element for each frame can make loading gifs
pretty memory intense (DOM-wise) compared to just using a single gif element,
no?

For example loading a 3mb gif would be something like 330+ frame elements that
are being looped.

But I like the idea though :)

------
joeblau
Can anyone point me to a good desktop tool for creating Animated GIFs. I've
used LICEcap but the "quality" isn't as good as other methods I've tried that
involve more work.

~~~
binaryjohn
GifCam is my tool of choice.
[http://blog.bahraniapps.com/?page_id=21](http://blog.bahraniapps.com/?page_id=21)

------
conductor
Sorry for off-topic.

@kogir

This thread demonstrates a small HN bug: I think the title is being encoded to
HTML entities two times.

------
chadscira
is there a reason why these are controlled via stylesheets and not turning
on/off the images (performance?)? also what happens if i have a gif with more
than 100 frames?

[http://img42.com/PkTga+](http://img42.com/PkTga+)

~~~
geelen
No good reason. I'm going to experiment with toggling the element's style
instead of adding a class. But because of the way GIFs are rendered, that's an
O(n) task on every frame (so is the CSS style recalculation, of course, but I
think the browser's CSS engine will be faster than my JS).

~~~
chadscira
i'm pretty sure a `opacity = 0`, and an `opacity = 1` in the same run loop
should perform fine, but nevertheless very cool!

------
Aldo_MX
As a developer not familiar with Polymer (until now), I don't know what I was
expecting, probably something like polystyrene that would play GIFs.

------
hartator
For people who wonders, the scene if from ghost in the shell.

I really like the pingpong effect, the speed and the music sync seems more
gimmicky.

------
trekky1700
It's amazing the creative uses of GIFs the internet comes up with. It'll be
cool to see what people do with this.

------
frozenport
Automatic server side replacement with HTML5 video would be cool. Also
resizing with auto-cache.

------
rplnt
Does not work in Opera (the normal one) at all. Uncaught exception and some
css errors as well.

------
catilac
This is incredibly cool. I'm definitely going to have some fun playing with
this.

------
user24
I would have loved this when I was running gifexplode.com (now owned by a
spammer).

------
tomphoolery
Oh my god it's YTMND and /r/AdviceAnimals __IN A TAG!!! __

------
superhighfives
This is absurdly cool.

------
conradfr
Could this be useful to make a better gifsound.com ?

------
nXqd
this is just so cool :D

------
camus2
Gif is the most horrible stuff that happened to the modern web. Wants
animation?use the video tag and dont autoplay your sh|t.

