GIFs as MP4s

Trying something new here on Ye Olde Blogge: animated GIFs are now served as MP4s in a VIDEO tag. That saves a vast amount of bandwidth since GIF is literally the worst of all possible video formats. Like, 830MB of images drops to 72MB. Twitter and Giphy and whatnot have been doing this for a while now (though Twitter, since they are dicks, make it impossible to download the original unconverted GIF data, even via the API).

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+'24*eq(in,0)'+'24*eq(in,1)'+'24*eq(in,2)'+'24*eq(in,3)'+'24*eq(in,4)'+'24*eq(in,5)',scale=600:92)

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.


Previously, previously, previously, previously.

Tags: , , , , ,

Where's Zinke?

"I am Elmer J. Fudd, Millionaire. I own a mansion and a yacht."
The interior secretary's special flag offers clues.

At the Interior Department's headquarters in downtown Washington, Secretary Ryan Zinke has revived an arcane military ritual that no one can remember ever happening in the federal government.

A security staffer takes the elevator to the seventh floor, climbs the stairs to the roof and hoists a special secretarial flag whenever Zinke enters the building. When the secretary goes home for the day or travels, the flag -- a blue banner emblazoned with the agency's bison seal flanked by seven white stars representing the Interior bureaus -- comes down.

In Zinke's absence, the ritual is repeated to raise an equally obscure flag for Deputy Secretary David Bernhardt.

Responding this week to questions from The Washington Post, a spokeswoman for Zinke, a former Navy SEAL commander, defended the Navy flag-flying tradition as "a major sign of transparency." [...]

Zinke, a Stetson-wearing former Montana congressman who has cultivated an image as a rugged outdoorsman, has come under a harsh spotlight in recent weeks for behavior criticized as extravagant for a public official. The agency's inspector general opened an investigation after he ran up bills for travel on chartered jets and mixed business with political appearances, sometimes accompanied by his wife, Lola. It's one of five probes underway of Cabinet secretaries' travel. [...]

Zinke rode to work on horseback on his first day in office and displays animal heads on his wood-paneled office walls. For a while, he kept a glass-case display of hunting knives but was asked to remove them because of security risks, according to people familiar with the decision.

He has commissioned commemorative coins with his name on them to give to staff and visitors, but the cost to taxpayers is unclear. Zinke's predecessors and some other Cabinet secretaries have coins bearing agency seals, but not personalized ones.

The flag ritual is unique in President Trump's administration. The White House does not raise the presidential flag when Trump alights at 1600 Pennsylvania Ave. There is no Defense secretary's flag atop the Pentagon.

"Yet."

Previously, previously, previously, previously, previously, previously, previously, previously, previously.

Tags: ,

  • Previously