Hacker News new | ask | show | jobs
by ereckers 4821 days ago
Everyone in that video seems to be having fun. Must be good.

The design of the production page is nice though. The video mast is kind of what I've been waiting for for a long time. It's nicely implemented.

1 comments

The source reveals that the video mast is actually an animated gif (or cinemagraph, as these tasteful creations are also known as). The stutter in the beginning kind of gives it away, but still quite impressive they included such a long edit and got it to load relatively fast (coming from reddit where uncompressed gifs run amok).
For me it's a <video> element, which kind of makes more sense.

    <video style="display: block;" class="_534g" id="fbhome-cinemagraph" autoplay="1" loop="1">
        <source src="https://fbcdn-dragon-a.akamaihd.net/cfs-ak-ash3/676434/970/135351913305575_544816858.mp4">
        <source src="https://fbcdn-dragon-a.akamaihd.net/cfs-ak-prn1/676663/942/135351913305575_1958437471.ogv">
        <img class="_53ol _53ol img" src="https://fbcdn-dragon-a.akamaihd.net/cfs-ak-ash3/676513/617/135351913305575_1421925707.jpg" alt="">
    </video>
I got a <video> tag as well. Firefox on Mac OS X.
Could you perhaps screenshot what you're seeing or paste a code sample? I'm seeing the same thing as cocoflunchy, just a <video> element, no gif.
Well, on second look it seems like the mast is using <video> for me as well- I originally looked too far and thought the id "fbhome-cinemagraph-canary" led to an animated gif. Apologies on making the wrong call!

Also, as a previous reply pointed out, what they're doing really doesn't count as a cinemagraph- FB needs to stop butchering words.

> or cinemagraph, as these tasteful creations are also known as

Just so you know, this is not a cinemagraph. A cinemagraph is not just a synonym for "high-quality animated gif". A cinemagraph isolates one moving part from an otherwise static picture (and the assumption is that at least some motion is frozen - ie, not everything that could be moving is moving).

It's kind of like spot-color[0], but for motion.

Lots of good examples: http://iwdrm.tumblr.com/

[0] http://en.wikipedia.org/wiki/Spot_color

Facebook is calling it a cinemegraph (see the HTML snippet in sibling commment) as part of their comprehensive war to redefine every word in the English language to be something of theirs.