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).
Re:Facebook Home
by cocoflunchy on Thursday April 04, 2013 @02:59PM
(#5494580)
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.
Re:Facebook Home
by brycedriesenga on Thursday April 04, 2013 @03:14PM
(#5494645)
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.
Re:Facebook Home
by chimeracoder on Thursday April 04, 2013 @02:57PM
(#5494568)
> 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/
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.