next »

[Adam_]

Hello TIGForums,

I noticed that there is a heavy use of animated .gifs in worklogs and similar threads, and I have started to embed a lot of .gifs myself. The downside is, .gifs are huge, slow / choppy, limited to 256 colors and it takes a lot of work to compress them in a way they don't kill bandwidth. By now, there are several alternatives to the outdated format, and I'd like to propose supporting one of them as a bbcode tag. My personal favorite would be Gfycat as a hosting service, or - more general - the .webm format in HTML5 video tags.

I'm experimenting with something like this in my own forum, so you can view an example on how it could be done here. It's far from flawless, but I'm not at all a web developer and am pretty sure someone of you could come up with a much greater solution, including browser fallbacks and the like.

Stuff that is great about .webm:

• Native HTML5 video support in most browsers.
• Very high quality.
• A lot more bandwidth-friendly than .gifs

Stuff that is not-so-great:

• It's not as widely supported as .gif, will require plugins for IE and Safari

What do you think?


Edit: Here's the HTML I'm using to replace the bbcode with. It tries to load the Gfycat .webm video from all of the three hosting URLs Gfycat uses, and if it can't load any of them, then your browser probably doesn't support .webm at all. So the last video source is a hardcoded fallback to an imgur mp4 that tells the user about his lack of .webm support.

Code:

<div class="video-container" style="width: auto; height: auto;">
   <video preload="auto" autoplay="autoplay" muted="muted" loop="loop" width="auto" height="auto">
      <source src="http://zippy.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://fat.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://giant.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://i.imgur.com/k3zUa1H.mp4" type="video/mp4" />
      Your browser doesn't seem to support the video tag or the webm format. Maybe there's a plugin for that? <a href="http://gfycat.com/{SIMPLETEXT}">View Source Video</a>
   </video>
</div>

[Moth]

That's absolutely gorgeous!

[Sik]

Weird, yesterday I've seen somebody say that it did indeed support MP4. In fact, the site claims that it should work on iOS, and I really doubt iOS supports WebM at all (and you wouldn't want to anyway - on mobile WebM has to be decoded in software, while MP4 can be decoded in hardware, having better performance and less battery usage).

[Adam_]

Weird, yesterday I've seen somebody say that it did indeed support MP4. In fact, the site claims that it should work on iOS, and I really doubt iOS supports WebM at all (and you wouldn't want to anyway - on mobile WebM has to be decoded in software, while MP4 can be decoded in hardware, having better performance and less battery usage).

They apparently use both and decide within the player which one to choose. Interesting. Maybe that phpbb code snippet could be updated to load the mp4 version as a fallback on devices without webm support. Will look into this!

[Adam_]

Turns out, it's actually not that hard to use an mp4 fallback provided by Gfycat. Here's the updated phpbb HTML replacement code:

Code:

<div class="video-container" style="width: auto; height: auto;">
   <video preload="auto" autoplay="autoplay" muted="muted" loop="loop" width="auto" height="auto" style="max-width: 100%;">
      <source src="http://zippy.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://zippy.gfycat.com/{SIMPLETEXT}.mp4" type="video/mp4" />
      <source src="http://fat.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://fat.gfycat.com/{SIMPLETEXT}.mp4" type="video/mp4" />
      <source src="http://giant.gfycat.com/{SIMPLETEXT}.webm" type="video/webm" />
      <source src="http://giant.gfycat.com/{SIMPLETEXT}.mp4" type="video/mp4" />
      Your browser doesn't seem to support the video tag. Maybe there's a plugin for that? <a href="http://gfycat.com/{SIMPLETEXT}">View Source Video</a>
   </video>
</div>

[ndke]

I'd like to see this as an option!

[Sik]

You would need to rephrase that fallback text because it can still show up when the video tag is supported but none of the codecs is available (or all URLs are broken, which can happen if somebody mistypes the address). Probably just showing the link as-is would be a better idea.

Also random thought, but should it really autoplay? Video decoding takes up a lot more of resources than animating a GIF, and if this were used in the GIF thread, well... take a guess. (and one of the advantages of the video tag is to not have to load the video until you want to play it, useful when you want to skip some of them)

[Adam_]

You would need to rephrase that fallback text because it can still show up when the video tag is supported but none of the codecs is available (or all URLs are broken, which can happen if somebody mistypes the address). Probably just showing the link as-is would be a better idea.

That's a good point. This should be modified before using it.

Also random thought, but should it really autoplay? Video decoding takes up a lot more of resources than animating a GIF, and if this were used in the GIF thread, well... take a guess. (and one of the advantages of the video tag is to not have to load the video until you want to play it, useful when you want to skip some of them)

Also a good point, but I think as a user I'd prefer them to autoplay - simply because I wouldn't even look at half of them because the preview frame is boring. Autoplay is a part of the gif spirit. Leaving it out may be pragmatic (and I agree), but it's also less than ideal with regard to the use case.

Can someone here maybe add a little bit of javascript magic inline to the HTML to make it play once visible / hovered / clicked? 

[Adam_]

Nevermind, I've updated the HTML code and taped together something myself:

Code:

<div class="video-container">
  <video preload="auto" autoplay="autoplay" muted="muted" loop="loop" style="height: auto; max-width: 100%;" onloadedmetadata="this.pause()" onmousedown="if (this.paused) { this.play(); } else { this.pause(); }">
     <source src="http://zippy.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://zippy.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <source src="http://fat.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://fat.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <source src="http://giant.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://giant.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <a href="http://gfycat.com/{IDENTIFIER}">[ View Video ]</a>
  </video>
  <div style="font-size: 50%; padding: 0px; margin: -2px 0px 2px 0px;">Gfycat Video - Click to Play</div>
</div>

Note that the video is still autoloading - this is necessary so it can determine its metadata, e.g. size automatically. Once that metadata is loaded, the video is immediately paused via media event, which should zero out CPU / GPU usage for decoding and handling the video element. Due to preloading, bandwidth will still be consumed, but compared to gifs, this is really no the bottleneck.

You can see how it looks like on this page of my forum.

[Gtoknu]

About IE support, If i'm not mistaken, gfycat embed will fallback to GIF in the worst case neither webm and mp4 are playable. (not sure about it though, but I'm pretty sure it is)

[Adam_]

About IE support, If i'm not mistaken, gfycat embed will fallback to GIF in the worst case neither webm and mp4 are playable. (not sure about it though, but I'm pretty sure it is)

I've tested it in IE, and it falls back on mp4, so the above embed code does work. I've added .webm sources with a higher priority, because I've had the experience that they tend to achieve a higher quality. IE will get the "ugly" mp4s, unless a .webm plugin is installed.

It also doesn't seem to be able to provide a preview image, if the video hasn't played at least for one frame, which is really annoying, given the fact that the above embed code pauses the video immediately.. will see if there is a way to defer pausing it until after the first frame.

[Adam_]

And here's another potentially duct-taped improvement:

Code:

<div class="video-container">
  <video preload="auto" muted="muted" loop="loop" poster="http://thumbs.gfycat.com/{IDENTIFIER}-poster.jpg" style="height: auto; max-width: 100%;" onmousedown="if (!this.controls && event.button == 0) { if (this.paused) { this.play(); } else { this.pause(); }}">
     <source src="http://zippy.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://zippy.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <source src="http://fat.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://fat.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <source src="http://giant.gfycat.com/{IDENTIFIER}.webm" type="video/webm" />
     <source src="http://giant.gfycat.com/{IDENTIFIER}.mp4" type="video/mp4" />
     <a href="http://gfycat.com/{IDENTIFIER}">[ View Video ]</a>
  </video>
  <div style="font-size: 50%; padding: 0px; margin: -2px 0px 2px 0px;">Gfycat Video - Click to Play</div>
</div>

This new version doesn't actually autoplay on load at all, as preloading the video appears to be completely sufficient for determining its metadata. (I'm not using metadata-only preload, so the video plays immediately on clicking it without buffering.) Also, I've found out the URL of Gfycats preview images and explicitly specifying it prevents IE from just displaying blackness until playing and potentially does some good for Chrome and Firefox too.

> Here < is how the new version looks in action.

Thank you all for your feedback.

[Canned Turkey]

Although it looks good for one or two, you should put this under a stress test and see if it could hold up to an entire thread of them.

[SolarLune]

I would also appreciate WebM support, I think. Just need to find a way to output it from GIMP (or, I guess, find a converter).

[Gtoknu]

@SolarLune
You can still output gifs, then upload them to gfycat, it will give you the webm link.
It seems imgur is now converting gifs to gifv, which actually is just a mp4 with another extension, to denote it is a converted gif.

[Adam_]

Although it looks good for one or two, you should put this under a stress test and see if it could hold up to an entire thread of them.

Those Gfycat videos are actually much, much smaller than a comparable .gif and unless you click on one of the embedded videos, they don't consume any CPU / GPU power as well. I agree that this needs to be tested, but I think it might be fine. Maybe even an improvement! Unless people start embedding giant videos, that is - but in that case, you could easily switch the preload mode to metadata only, preventing bandwidth consumption.

I also must admit that my example Gfycats are really, really big. I wouldn't have managed to upload a gif even remotely that size or frame rate, and I guess I got carried away by the possibilities. Most Gfycat videos following the footsteps of the good old embedded gifs shouldn't be that big.

@SolarLune
You can still output gifs, then upload them to gfycat, it will give you the webm link.
It seems imgur is now converting gifs to gifv, which actually is just a mp4 with another extension, to denote it is a converted gif.

Yep - that's how I did my videos. Fraps to capture --> VirtualDub to convert to gif --> Gfycat does all the rest. Also, you can actually export 60 FPS gifs now, which look crappy at first glance, because some image viewers and browsers can't handle them, but they're fine and smooth after .webm conversion via Gfycat.

[initials]

I'd like to put this up for debate. Gfycat is great, but I also use imgur's new gifv format, and would love to see a tag for gifv.

[Sik]

Or maybe just a generic video tag, since every site will come up with its own non-standard solution and all of those are basically "let's convert GIF to MP4" =P (also we should wonder if it makes sense to lose quality by converting to GIF then to video instead of just saving to video directly)

Also, you can actually export 60 FPS gifs now, which look crappy at first glance, because some image viewers and browsers can't handle them, but they're fine and smooth after .webm conversion via Gfycat.

Can you even make good-looking 60FPS GIFs at all in the first place? The frame duration is specified in steps of 10ms, but a frame in 60FPS lasts ~17ms. It'll just look horrible no matter what (the easiest workaround is to do 20ms, 20ms, 10ms and repeat, but I'm not sure how well that works in practice)

50FPS is a whole different deal though, since it's 20ms per frame which fits GIFs perfectly.

[SolarLune]

Or maybe just a generic video tag, since every site will come up with its own non-standard solution and all of those are basically "let's convert GIF to MP4" =P (also we should wonder if it makes sense to lose quality by converting to GIF then to video instead of just saving to video directly)

As far as I know, though, YouTube only supports 30 FPS, so both 60-FPS Gifs and embedded videos would be appreciated (personal opinion).

[Adam_]

Can you even make good-looking 60FPS GIFs at all in the first place? The frame duration is specified in steps of 10ms, but a frame in 60FPS lasts ~17ms. It'll just look horrible no matter what (the easiest workaround is to do 20ms, 20ms, 10ms and repeat, but I'm not sure how well that works in practice)

50FPS is a whole different deal though, since it's 20ms per frame which fits GIFs perfectly.

I've done it and it looks great No idea about the tech details, but apparently it works just fine. Otherwise, you could just upload a video directly to Gfycat, without gif conversion inbetween.

Or maybe just a generic video tag, since every site will come up with its own non-standard solution and all of those are basically "let's convert GIF to MP4" =P (also we should wonder if it makes sense to lose quality by converting to GIF then to video instead of just saving to video directly)

I'd like to put this up for debate. Gfycat is great, but I also use imgur's new gifv format, and would love to see a tag for gifv.

In my experience, .mp4 looks too blurry for high-quality gamedev gifs, especially since a lot of them incorporate a little bit of retro style - .webm does a much better job on this. My preference would be Gfycat, because it provides both .webm and .mp4, so the tag can default to the higher-quality .webm version and fallback to .mp4 for mobile and Internet Explorer. Imgur on the other hand only supports .mp4.

All those examples I've posted? Yeah, that's .webm. View it in IE to see the blurry, low-quality .mp4 version. (Unless you happen to have that .webm plugin installed)