Farewell GIFs, hello WebM! (Vanilla support?)

Zhaan

I've recently been made aware of the awesomeness that is WebM, a format that could very well dethrone the GIF. So I'm wondering, would it be possible for future versions of Vanilla to feature WebM embed support? It could either function like GIFs do (auto-play or on-hover play) or something similar to YouTube embeds. Sound should probably be disabled by default though.

Why use WebM?

• 60 FPS
• More colours
• Vastly superior image quality
• Fast loading
• Save bandwidth

The only downside seems to be CPU usage.

Examples

• Assassin's Creed Unity
• Titanfall
• Bayonetta

What is WebM?

A brief explanation of WebM can be found here. I've posted some of it below:

What is WebM and how is it better than the GIF format, the current king of easily-embeddable, looping animations? Here's a quick rundown on the WebM technology, the way of the future for compressed video.

WebM is an open-source audio-video codec for HTML5 video sponsored by Google, but originally built around technologies developed by On2, Xiph, and Matroska. "The WebM format combines the [On2's] VP8 video codec, the Matroska container, and the Vorbis audio codec developed by Xiph into a high-quality, open, unencumbered format for video delivery on the Web," wrote Xiph's Chris Montgomery back in 2010, shortly after that year's Google I/O Conference, when the format was announced.

Initially WebM was lauded for being a royalty-free alternative to the H.264 codec, which powers everything from online videos to Blu-Ray discs. But it also has an interesting advantage as compared to other video formats: WebM videos can be easily coded to autoplay and endlessly loop without an additional video player, which makes them a potential competitor to the GIF, which currently reigns supreme for easily-shared, easily-embedded animations.

Its advantages over GIF include "superior image quality, support for more than 256 colors, and reduced file size," as 4chan's Moot (Chris Poole) noted. "Its main disadvantage is browser compatibility, however 86% of 4chan’s visits come from browsers that include full or partial support for WebM, and plug-ins are available for those that don’t (like Internet Explorer and Safari)." WebM animations are still more like a video than an image file, which means they're trickier to manipulate and upload, as evidenced 4chan's WebM encoding guide. Currently, Chrome, Firefox, and Opera offer browser support for WebM, while Safari and Internet explorer require third party plugins.

Thoughts?

PS: I wasn't sure whether to post this as a question or feedback. Feel free to correct me as you see fit!

x00

GIF and WebM aren't really comparable.

It is a strange comparison to make, really. A better comparison would be flv.

Animated gif were always an expensive at any scale. it is just a bit of a novelty really. It isn't really a Video format at all.

The only reason to use animated gif, if for little trinkets, were you are pretty much guaranteed support. it was never intended to be a replacement for video/medias formats.

WebM is a codec which mean you need a container format for it.

My suggestion is to use a media script like VideoJS, provide other alternative to WebM like Ogg, and Mp4.

You want to offer the broadest coverage.

x00

This is a client technology, not a server technology (except for the streaming). You only need to allow video/source tags in Htmlawed. Or you can use one of the main js libraries to embed it.

That is something for plugin developers. You could implement it even.

WebM, is codec it is not a container or interface, some browsers may not have it.

x00

Embedding videos it is not he hard part is is to formating the various alternatives and serving them. of course if you are using a media site that does all that for you you don't have to worry. Because to do it yourself trust me isn't quite the walk the park you'd expect.

Zhaan

Well, the GIF comparison came from a gaming forum I frequent. They pretty much use them instead of GIFs now. I didn't mean to cause any confusion!

Thanks for your input though. It sounds easier than I thought.

Because to do it yourself trust me isn't quite the walk the park you'd expect.

Oh.. well, I guess I'll ask my tech-savvy friend for some advice.

Zhaan

I feel I was being a bit unclear in my opening post, so just to clear any confusion:

WebM may differ greatly from GIF in a number of ways, but it is being used for the exact same purpose. If you want to see what I mean by this, install this plugin for Chrome (or Firefox) and then browse this page. You'll see loads of .webms that act just like GIFs do, but with significantly higher quality and framerate.

vrijvlinder

I have been making animations for 30 years. Gif is here to stay for it's purpose. The desire to manipulate video and audio has given birth to new things new codecs new formats

WebM is an audio-video container format designed to provide royalty-free, open video compression for use with HTML5 video. The WebM Project releases WebM-related software under a BSD license and all users are granted a worldwide, non-exclusive, no-charge, royalty-free patent license. The project is sponsored by Google Inc.

The WebM container is based on a profile of Matroska. WebM initially supported VP8 video and Vorbis audio streams. In 2013 it was updated to accommodate VP9 video and Opus audio.

Allows playback of WebM files through the standard HTML5 < video > tag

For example webm gifs will have controls like a video player. But the gif is still a gif, only it is being contained and played in something else. Facebook already does this with gifs contained in webm.

Also flash movies will be able to stream better according to google. In essence it is another quicktime , windows media type player that gets embedded using html5 < video > tag and has on off controls etc.

This is not a new gif, this is a new way to play gifs. as far as gifs go...

Here is more meat on this which really is about trying to get people to adopt new standards that are compatible with html5 and web publishing.

http://www.webmproject.org

This is an example of embeding video using the html5 tag

<video width="200" height="160" controls autoplay=1 loop=1>
  <source src="/images/stories/videos/archivo.webm" type="video/webm">
 Your browser does not support the video tag.
</video>

chanh

I was a little confuse when I read this WebM previously and now you mention HTML5 that start to make sense. So it means that WebM only work with browser that support HTML5.

Is that correct?

vrijvlinder

Yes the browser needs to support html5 which all of them do now, and also support that file type, Chrome has it built in because it is a google project. For Safari and others there are plugins you can add to the browser so it will play the WebM file types.

If you don't have the plugin installed, the movie looks like a normal gif without controls.

chanh

I see, thanks

vrijvlinder

Here is an example of what a gif looks like when converted to webm

Here is a link to an online converter

http://video.online-convert.com/convert-to-webm

you can do this with any animated gif or movies and video clips. You can play it by dragging it into the chrome browser window or a browser that has the plugin installed.

x00

Right now it is a toss up between Mp4,Ogg and WemM, so if you are doing html5 video you might as well serve all three, however like I said most people do not have a decent media server, so it would be better if you use a service, therefore you don't have worry qobut WebM.

Chances are you have already used WebM without using it.

vrijvlinder

Chances are you have already used WebM without using it.

Google is using it already and youtube videos but you need to opt in because it is still in test mode. And you need to have the plugins if you use something other than chrome. The only advantage in my opinion is the controls to stop the gif and rewind.

gif can support more than 256 colors that is not what makes it heavy , it is the amount of frames and the actual size of the images being made into a gif.

I like gif format because it easy to upload and play and edit. At this time there is not much compatibility to upload webm files as such. Most places you would upload this to share it have yet to add it as an allowed file type. We shall see what happens...

x00

GIF is heavy becuase it has limited built in compression compared to codecs, and it rendering is slow.

That said it may be more efficient is some cases, becuase video codec assume a certain amount of data.

If you are using all the colors then you probably aren't getting the best out of it. Index is the norm. In Complex scenes, you probably need dithering or posterization.

vrijvlinder

The problem with optimizing a gif animation is that you will end up with a bad frame or a skipping frame or even just some messy dots.

There should not be 200 frames in a gif. But people do it any way. If the gif is 40px by 40 px then the amount of frames is not so much an issue because of the size of the images.

It also depends on what each frame is meant to do. Here is an example of large gif I made out of this painting I made It only has 4 frames and they are timed to give natural appearance .

vrijvlinder

Here is a more complex one but it is very small, I made this for my avatar when I was playing mob games .

chanh

yep, animated gif is meant for small banner but people turn it into a video like huge banner and it is just taking forever to load and people complaint why their site is so slow to load.

peregrine

yep, animated gif is meant for small banner but people turn it into a video like huge banner and it is just taking forever to load and people complaint why their site is so slow to load.

garbage (animations,etc) in, garbage out. more time for the compactor and recycling.

vrijvlinder

Hey my animations are not garbage !!

peregrine

@vrijvlinder said:
Hey my animations are not garbage !!

Por supuesto no todas las animaciones son senstaional

vrijvlinder

You just said the same thing ... kind of

Not all animations are sensational ...this one is

https://www.facebook.com/photo.php?v=734840709893621&set=vb.166337376743960&type=2&theater