gifv BBCode

[Cthulhu]

I herd u liek gifs. But I dislike using the animated .gif format to embed videos, it's a terrible format to use, using 100 MB for a video that could be cut down to 5 or less.

Both imgur and (before them) gfycat tried to fixx this by trying to sell the fancy html5 video tag as some kind of 'gif like format'; imgur calls it "gifv" and embeds it like that on its site; saves them heaps in bandwidth (at the cost of having to convert gifs to videos).

Do the same for those on metered internets and mobile connections; use gifv instead of gifs. Only works with gifs hosted on imgur.com. Take the ID of the video (basically everything behind the last slash, or behind the last slash and the dot / extension) and chuck it in between [/PLAIN]

This is converted to:

<video poster="//i.imgur.com/DGLfkZg.jpg" preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline="" style="max-width: 100%; height: auto;">
  <source src="//i.imgur.com/DGLfkZg.webm" type="video/webm">
  <source src="//i.imgur.com/DGLfkZg.mp4" type="video/mp4">
</video>

and looks like:



i.e. a html5 video tag with two sources, a .webm format if your browser can play that (Chrome / Firefox / Opera), or the proprietary .mp4 / h.264 format (everything). If your browser can't play it, get a newer one, you're running at least five years behind. But, do let me know if it doesn't seem to work for you.

Unlike the gfycat one, this one shouldn't deform too much, I hope, and should work with edits and shit too. But, IDK, I've never used video tags before and don't know its pitfalls.

Anyone posting a .gif video hosted at imgur via

 

[Tennyo]

There is an entire thread crying out in joy.

 

[Geostigma]

My time has come

 

[Cthulhu]

 

[Octo]

Did I do right?

So why can't this be used on non imgur gifs? Is that something we have to wait for like hovercars?

 

[Tennyo]

Just wait until I'm not at work...

 

[Geostigma]

Did I do right?

So why can't this be used on non imgur gifs? Is that something we have to wait for like hovercars?

Imgur automatically converts gifs to gifv which is basically a video where as gifs are more or less image files.

So this code most likely won't be able to open non imgur gifs.
Similarly the gfycat code can only play "gifs" from gfycat for the same reason.

As Yop noted the reason is that Imgur and Gfycat are utilizing HTML5 video/webm to convert gifs into this format and just changed the extension to gifv/gfycat as a way to make it more familiar.

The upside is that gifv and gfycat are about 90% smaller files than the original gif with minimal quality loss.

edit:

I should its also super convenient to make one as well.
For instance on GFYcats site you can link a youtube video and punch in the time you want turned into a gif and your done. Perfect for forums

http://gfycat.com/

 

[Tennyo]

I once found the most magnificent Princess Bride Deal With It gif to ever exist on Imgur, but alas, I am unable to locate it.

Here's a cat tho <3

 

[ForceStealer]

 

[Cthulhu]

So why can't this be used on non imgur gifs? Is that something we have to wait for like hovercars?

Imgur automatically converts gifs to gifv which is basically a video where as gifs are more or less image files.

I'm going to take a shot at "most pedantic",

The TL;DR is that I'm too lazy to write code that can detect the kind of URL you're using; it should be reasonably easy to recognise an url from a site that is known to supply video alternatives to .gifs, but, cba. Basically right now I take the image id and insert it into relevant HTML; the IDs would be different for different sites.

gifv is not a format; it's a random alias imgur invented themselves for marketing reasons (gifs are cool with the kids, videos aren't, and they're too st00pid to know the difference). gifs are indeed image files, often animated, but their compression algorithm was optimized for line drawings (animated or not), definitely not video material. There hasn't been another successful "animated image" format (animated PNG is a thing, but that too is more optimized for (line) drawings / simple images, and was intended as a more open replacement for the .gif format).

imgur converts and / or interpolates .gifs to HTML5-compatible video formats; at the moment the most common formats are .mp4 (you should know those), a 'closed source' / licensed format, and .webm, a newish and openish video format invented by Google. IIRC Google made a big push to try and make .webm the standard, but in the end, the standardization committee ended up not deciding on a standard video format - which leaves us here.

What imgur (and gfycat, and probably others) do instead is offer several fallbacks; they convert the .gifs (or videos) to both webm and mp4 and put those as sources in the video tag (so browsers can pick which one they like best), and they even offer a Flash-based alternative video player / format for older browsers (hence the warning that it may not work for some - but, upgrade your browser).

TL;DR: Browser standardization failed so we can't have nice things.

 

[Channy]

So like, can someone hold my hand through this whole process because I'm for some reason either completely inept or can't find a single gifvideo that's applicable for this code.

 

[Tennyo]

It only works for gifs hosted on Imgur.

Put the letters and numbers at the end of the url between the brackets kind of like you do with a YouTube video.

 

[Cthulhu]

Or just link us to whatever you're trying to embed, we can help figure it out.

 

[ForceStealer]

So my only question is, what about this is different from just [img ][/img] tagging a gif?

 

[Geostigma]

Gifs can range from being 90% to a 100% larger file sizes. So understandably when it comes to bandwidth they can be stressful especially when you consider there might a page filled to the brim with them , such as our TLS gif thread .

Gfycats actual site actually notes the amount of bandwidth saved for instance :

http://gfycat.com/CircularBothDassie?tagname=funny

this in its original gif form was 23mb , and turning it into a gfycat made it 2mb with minimal quality loss.



tl;dr it loads faster.

edit:

hmm interestingly enough when you copy and paste the gfyca page which shows the stats , it just leads you to the embeded page without the stats =/

Well none the less if you want some examples it's as easy as going to gfycat.com and clicking any of the top uploads to see their stats/bandwidth saved.

 

[Channy]

I'm having way too much trouble with gifcat and imgur and trying to load these damn things properly. None of them seem to work for me.

fuck the system

 

[Geostigma]

Like yop said in the first post update your browser lol

If it's not working either you are running an extremely old version of the browser or there is something wrong with your pc/browser.

By virtue of the way these work they should actually load and work better than gifs ever did.

 

[Channy]

Then like I said before, someone needs to hold my hand through the whole process because I ain't gettin it.

 

[Tennyo]

You don't get how to update your browser? Or how to post gifs?

Honest question.

 

[Geostigma]

Yeah from the wording in the posts so far I can't tell if Channy can't embed them into the post or if they won't play for her lol.

 

[Cthulhu]

TBF she did just embed an image off Tumblr, which is a whole different ball game,

 

[Channy]

I DON'T KNOW ANYMORE ;-;



...but seriously, when I was looking/comparing from Yop's original post it sounds like there's just the one part of a link you copy to embed, just like a youtube video, as opposed to a img, which has the whole link... but I tried a couple and looking on gifycat and just... can't find that one secular piece?? I do the whole inspect element business too.

 

[Geostigma]

For imgurs gifv's only copy and paste this portion of the url

into a [ gifv] [ /gifv] code, no spaces between the brackets.
The result is




edit:

Yop I was looking at some past posts where I posted gfycats and it seems like all of them feature the distorted stretchyness even though when first implemented several months ago they definitely were not there.

Perhaps gfycat changed something recently that is causing it? Might be best to disable gfycats here since they can make a page really long haha.

example :

http://thelifestream.net/forums/showthread.php?t=17217&page=2

 

[Tennyo]

Wasn't there a different tag for gfycat?

 

[Geostigma]

Yes gfycat is just [ gfycat] [ /gfycat] and then the 3word name in the url

and your result is this

Spoiler

The problem is that for some reason right now gfycat's player is sending the actual control portion of it about 1000 feet south of where it needs to be

Gfycat also for some reason doesn't follow the rules and resizes itself to fit on the forums layout and will instead stretch it as necessary.