7 ms·
A Polymer element for flexible GIF playback
- Sir_Cmpwn 13y agoAlternatively, ditch GIFs entirely and use bandwidth-friendly and feature-friendly HTML5 video.
- geelen 13y agoNah man GIFs are my spirit animal
- zach 13y agoCan you even autoplay HTML5 video on a page in, say, the platform I'm posting from, iOS 7?
- geelen 13y agoNope, has to be triggered by a user action (like a tap), and can only play full screen. Also, if you loop a video, the control bars flash up then fade away each time it loops.
- dangerlibrary 13y agoNo. And those with bandwidth caps are doubly grateful for that. Once for not being opted into wasting bandwidth, and again for the smaller file size if they choose to use it.
- ivanca 13y agoThe browser/tab/page should ask for permission to play video/audio, just like Chrome for mobile already does for other services (i.e. location)
- Dylan16807 13y agoOr more likely you get a gif to avoid degradation, and you spend 10x as much bandwidth.
- kennywinker 13y agoNot 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.
- deleted 13y ago[deleted]
- ivanca 13y agoYou 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)
- vernie 13y agoI had no idea, thanks!
- nmeofthestate 13y agoI 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 13y agoWhen 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".
- est 13y agoDo you know why HTML5 video is not as popular as gif? Gif is easily copy-pastable, both by content and raw file URL. Thus help its viral spreading
- rasz_pl 13y agonothing stops mp4 files from being easily copy-pastable ...other than software vendors and patents :/
- Crito 13y agoGive me an imgur of silent filesize limited html5 videos. No, youtube or vine don't cut it, I want to be able to give people a link to a raw file that they will automatically know to be small and silent.
- rcxdude 13y agohttp://gfycat.com/ http://gfycat.com/
- swanson 13y agohttp://gfycat.com/ http://gfycat.com/ has been gaining popularity on reddit lately. Links allow you to pick gif or html5 video. Example: http://gfycat.com/GlisteningBruisedClingfish http://gfycat.com/GlisteningBruisedClingfish
- Crito 13y agoThe last time I looked they did not seem to have a way to upload videos, only gifs, making it pointless to me since either way I was uploading the same thing. It looks like they've fixed this, but their UX still needs work. It also seems that there is a discrepancy in permissible length with them. They will allow you to upload gifs that are longer than 15 seconds, but not videos that are longer than 15 seconds.
- Sir_Cmpwn 13y agoNo no no no no ;_; I made this website, use it instead: https://mediacru.sh https://mediacru.sh It also does HTML5 GIFs and has a fallback for phones and such. BUT it's also open source, much higher quality, more featureful, and supports more than just GIFs. Even though MediaCrush and gfycat started around the same time and MediaCrush is much better, I can't seem to get people to use it more. I guess our users are less evangelical.
- bobsgame 13y agoYou need a flashier, more colorful logo and a bright red BETA tag and a cute name and silly slogan and a login link and a moving number counter on the front page. gfycat looks alive, yours looks static and cold. mediacru.sh is hard to type and not as memorable of a name. Average internet user won't care about "open source" or features they don't know are missing. Other than that, great work. You can do it.
- heyheyhey 13y agogftcat baby! http://gfycat.com/ http://gfycat.com/
- com2kid 13y agoWhich work differently in different browsers. Currently HTML5 shows up as nothing more than a green screen in FF and will do such until I reboot my machine. (Presumably this is a video driver issue, still annoying, Video elements work for me for awhile then will suddenly just stop working.) Flash keeps on working. Well mostly, as well as it ever has worked. Even better are pages that see that I have FF and just assume they can feed me video, not allowing me to fall back to Flash if I have bothered to go to about:config and disable all relevant HTML5 settings.
- cLeEOGPw 13y agoCan you save html5 video as file as easily as gif?
- yvoschaap2 13y agoDon't forget an important reason gifs are rampant; they aren't chased by take-downs of copyright holders, while video snippets are much more exposed...
- superhighfives 13y agoThis is absurdly cool.
- jergason 13y agoGlen 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.
- TheSoftwareGuy 13y agoI 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 13y ago> 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 13y agoAll 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.
- chadscira 13y agois 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 13y agoNo 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 13y agoi'm pretty sure a `opacity = 0`, and an `opacity = 1` in the same run loop should perform fine, but nevertheless very cool!
- camus2 13y agoGif is the most horrible stuff that happened to the modern web. Wants animation?use the video tag and dont autoplay your sh|t.
- benschwarz 13y agoYou sir, are an idiot.
- trekky1700 13y agoIt's amazing the creative uses of GIFs the internet comes up with. It'll be cool to see what people do with this.
- tomphoolery 13y agoOh my god it's YTMND and /r/AdviceAnimals IN A TAG!!!
- conductor 13y agoSorry for off-topic. @kogir This thread demonstrates a small HN bug: I think the title is being encoded to HTML entities two times.
- conradfr 13y agoCould this be useful to make a better gifsound.com ?
- Aldo_MX 13y agoAs a developer not familiar with Polymer (until now), I don't know what I was expecting, probably something like polystyrene that would play GIFs.
- runaway 13y agoNice work. I made GIF Scrubber (http://goo.gl/8vRwr2 http://goo.gl/8vRwr2) which does similar things in a Chrome extension and thought about something you could embed like this but memory and performance became an issue very quickly once I tried larger GIFs. I didn't look at the source but this starts to choke a bit and broke on a few hundred frames. I can tell you people will moan about it even though you're doing wonderful work for free. I would try to avoid some needless issues by putting up a big old disclaimer or something stating this is intended for shorter loops (at the moment). For that purpose which you demo, it looks really slick. Cheers
- nXqd 13y agothis is just so cool :D
- catilac 13y agoThis is incredibly cool. I'm definitely going to have some fun playing with this.
- joeblau 13y agoCan 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 13y agoGifCam is my tool of choice. http://blog.bahraniapps.com/?page_id=21 http://blog.bahraniapps.com/?page_id=21
- ilovecookies 13y agoA 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 :)
- frozenport 13y agoAutomatic server side replacement with HTML5 video would be cool. Also resizing with auto-cache.
- rplnt 13y agoDoes not work in Opera (the normal one) at all. Uncaught exception and some css errors as well.
- hartator 13y agoFor 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.
- feelstupid 13y agoI 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?
- user24 13y agoI would have loved this when I was running gifexplode.com (now owned by a spammer).