It's actually pretty tricky to convert a GIF to an MP4 in the general case, since GIFs have variable frame rate (really, an arbitrary delay after each frame, which can be different for each one), plus they can be transparent, which MP4s cannot be. You'd think that ImageMagick or ffmpeg would just do the right thing on this common task that lots of people want these days, but no, that's crazy talk. I'm converting them using the all-singing all-dancing image-and-video resizer that I wrote, resize.pl, which uses ImageMagick to extract each frame as a PNG then constructs an incredibly hairy ffmpeg command to put it all back together with the proper frame timing.
(Seriously, it's insane, it looks like this, and this is for just 6 frames: -vf zoompan=d=0
Then after that, part of my WordPress theme sees IMG tags with GIFs in them and converts those to VIDEO tags. (I had to go through and indicate the old GIFs that are not animations to make that work. Did you know that people used to use GIFs for things that were not animations? I know! So weird!)
People say that you should be able to do
- <VIDEO LOOP AUTOPLAY PLAYSINLINE MUTED>
<SOURCE SRC="xxx.mp4" TYPE="video/mp4" />
<IMG SRC="xxx.gif">
</VIDEO>
and that should degrade kind of like <NOSCRIPT> does, using the SOURCE in browsers that understand VIDEO and falling back to the IMG in older browsers... but from watching the network, I could see that Safari was loading the video, and then loading the GIF as well! So that kind of defeats the entire purpose, so I'm omitting the IMG. If your browser doesn't support VIDEO I guess it sucks to be you. That does make it harder to copy images, though, and that's annoying and dumb.
Let me know if you see any problems.
If things are escaping their boxes or otherwise the wrong size, try emptying your cache and shift-reloading. I ticked the cachebuster number on my CSS but browser caches have been an incomprehensible disaster since 1994, so who the hell knows what they are doing.
I've noticed a couple of weird things. In Chrome, I had to add overflow:hidden to ".widget_jwz_previously a". This wasn't necessary in Safari, but in Chrome it also has the effect of clipping off the border on the left and right sides, which sucks.
I've also noticed that sometimes the AUTOPLAY does not autoplay. Or maybe it's that LOOP stops? No idea why that is. It's doing something inexplicable on desktop Safari and something doubly and differently inexplicable on iOS.
Actually I'm finding that "no autoplay" thing super annoying, and if I can't figure out what's going on there I may just go back to GIFs, even though they are more than 10× larger. Sigh.
Update:
I think I see what's going on with Safari: if a VIDEO tag is either above or below the fold at the time that you load the page, it will never autoplay, even after it scrolls into view. I can make videos in the comments here and in the "Previously" sidebar either play or not depending on where the scrollbar happened to be when I hit reload. That's fucked up.
Update 2:
Since Safari (both desktop and iOS) like to ignore AUTOPLAY, it looks like one way to work around that is to put this Javascript in the document footer:
-
var really_autoplay = function() {
var aa = document.getElementsByTagName("video");
for (var i = 0; i < aa.length; i++) {
if (aa[i].getAttributeNode("autoplay")) aa[i].play();
}
};
if (document.readyState == "loading") {
addEventListener ("DOMContentLoaded", really_autoplay);
} else {
really_autoplay();
}
(I thought that merely being after all of the VIDEO tags would be sufficient, but no, being after DOMContentLoaded seems to also be required.)
This hack still means that most videos won't autoplay in browsers that have Javascript turned off, and videos won't show up at all in old browsers that don't support the VIDEO tag. Those might at first sound like weird cases you can ignore, except one or both of those cases probably includes "every RSS reader".
So VIDEO is not at all a drop-in replacement for IMG with animated GIFs. However, the bandwidth savings is so significant that it might be worth doing anyway.