5 ms·

I'm not sure if I should be impressed by this. From a technical standpoint, it seems quite clever and unique, but it also seems like a lot of work just to avoid

by codeka 14y ago

I'm not sure if I should be impressed by this. From a technical standpoint, it seems quite clever and unique, but it also seems like a lot of work just to avoid using a <video> tag.

daeken 14y ago
As noted in the post, iOS devices will only do video tags fullscreen.
- codeka 14y ago
  I just tried on my friend's iPod and the animation doesn't play there anyway (it just stays on the "lock" image). Maybe the iPod browser is different (my Android doesn't play the animation either) but I'd be surprised if the animation worked on an iPhone but not on an iPod...
  - deleted 14y ago
    [deleted]
  - dbloom 14y ago
    It definitely works on iPhone (I've tried on my 4S and on Simulator). Apple's JS disables the animation for iOS 4.x and below, so maybe that's why it wasn't playing on your friend's iPod.
    - josteink 14y ago
      > Apple's JS disables the animation for iOS 4.x and below, so maybe that's why it wasn't playing on your friend's iPod. I see Apple is really embracing the idea of "the one web" here, introducing web-fragmentation even among their own devices. Apple has long stopped impressing me. Back in the days when they were the clear underdogs, they were for web-standards and a unified web, because they saw how that was good, and that was what allowed them to become what they are now. Now it seems they don't really have so much ideological issues with how web-pages should be built anymore. Funny thing that.
      - culturestate 14y ago
        There's nothing non-standards compliant about what they've done, as far as I can tell. Disabling the animation seems like an attempt at ensuring graceful degradation.
        no_more_death 14y ago
        Graceful degradation shouldn't be based on user agent sniffing. That defeats the purpose.
        culturestate 14y ago
        I would argue that any reasonable technique that allows users of older browsers to access your site or use your app relatively normally is within the bounds of what we would describe as "graceful degradation." Being non-automatic doesn't make it any less valid.
- dtorres 14y ago
  that is only true for iPhone and iPod touch, you can have inline video on the iPad.
  - justincormack 14y ago
    And in iAds on the phone...
- jonny_eh 14y ago
  Seems like a lot of work to workaround a drawback in their own browser.
borplk 14y ago
Yeah it's weird. My web developer side is impressed by the technical detail that go behind it. But my other web developer side asks why the f*ck should achieving a simple video effect on a web page should be this hard in 2012? There is a whole pattern of similar things like this in web that is killing me a little bit every day. Want to center a div on the page? No worries just wrap it in these 5 divs and apply these 20 css properties and you are good to go. Oh btw, IE doesn't like that, you need this. Honestly I think we developers should stop putting up with crap like this, and accepting the burden of broken technologies using hacks, etc... If we become less tolerant of crap, there will be less crap. As long as we accept it by using workarounds, etc... there will be more shitty things to come.
- wahnfrieden 14y ago
  CSS's flexible box model will eliminate that issue once it has wider support. There is a solution in the pipeline, it's just a matter of time. Not the best link, but here's some more recent info: http://css-tricks.com/old-flexbox-and-new-flexbox/ http://css-tricks.com/old-flexbox-and-new-flexbox/
- rglover 14y ago
  What's difficult about centering a box? Was that just sarcasm? A couple of approaches: Margin Auto w/ a fixed width Absolute 50% w/ negative margins Text-align center parent w/ inline-block display on children If it was sarcasm, disregard my stupidity.
  - TruthElixirX 14y ago
    I think it was a hyperbole, but there really is a lot of dumb shit in web design.
  - borplk 14y ago
    That's still non-intuitive. Just do a search about centering (or X problem in CSS) and see the thousands of threads and questions and corner cases, hacks and exceptions. The whole thing feels like you are stretching something beyond what it was intended to be used for. Things like element positioning should be so so simple that if you search about it, you get nothing back because no one had a problem to ask for solutions. Although I must say I'm not mocking CSS in particular, most web technologies feel this way because they were designed many years ago for a web that was supposed to have simple 'documents' like an article, text and paragraphs and today each component of it is expected to do a lot more. It's not getting all that much better either because each new version and improvement is building on top of the previous decisions, etc...
johnx123-up 14y ago
Anybody knows, why can't we use GIF instead?
- codeka 14y ago
  You probably could, but given that GIF files are limited to a 256-colour palette, it would probably look pretty horrible. Especially for such a large image.
  - eliaskg 14y ago
    Also you would end up having varying frame rates in different browsers.

by codeka 14y ago

I'm not sure if I should be impressed by this. From a technical standpoint, it seems quite clever and unique, but it also seems like a lot of work just to avoid using a <video> tag.

daeken 14y ago

As noted in the post, iOS devices will only do video tags fullscreen.

codeka 14y ago
I just tried on my friend's iPod and the animation doesn't play there anyway (it just stays on the "lock" image). Maybe the iPod browser is different (my Android doesn't play the animation either) but I'd be surprised if the animation worked on an iPhone but not on an iPod...
- deleted 14y ago
  [deleted]
- dbloom 14y ago
  It definitely works on iPhone (I've tried on my 4S and on Simulator). Apple's JS disables the animation for iOS 4.x and below, so maybe that's why it wasn't playing on your friend's iPod.
  - josteink 14y ago
    > Apple's JS disables the animation for iOS 4.x and below, so maybe that's why it wasn't playing on your friend's iPod. I see Apple is really embracing the idea of "the one web" here, introducing web-fragmentation even among their own devices. Apple has long stopped impressing me. Back in the days when they were the clear underdogs, they were for web-standards and a unified web, because they saw how that was good, and that was what allowed them to become what they are now. Now it seems they don't really have so much ideological issues with how web-pages should be built anymore. Funny thing that.
    - culturestate 14y ago
      There's nothing non-standards compliant about what they've done, as far as I can tell. Disabling the animation seems like an attempt at ensuring graceful degradation.
      - no_more_death 14y ago
        Graceful degradation shouldn't be based on user agent sniffing. That defeats the purpose.
        culturestate 14y ago
        I would argue that any reasonable technique that allows users of older browsers to access your site or use your app relatively normally is within the bounds of what we would describe as "graceful degradation." Being non-automatic doesn't make it any less valid.
dtorres 14y ago
that is only true for iPhone and iPod touch, you can have inline video on the iPad.
- justincormack 14y ago
  And in iAds on the phone...
jonny_eh 14y ago
Seems like a lot of work to workaround a drawback in their own browser.

borplk 14y ago

Yeah it's weird. My web developer side is impressed by the technical detail that go behind it. But my other web developer side asks why the f*ck should achieving a simple video effect on a web page should be this hard in 2012? There is a whole pattern of similar things like this in web that is killing me a little bit every day. Want to center a div on the page? No worries just wrap it in these 5 divs and apply these 20 css properties and you are good to go. Oh btw, IE doesn't like that, you need this. Honestly I think we developers should stop putting up with crap like this, and accepting the burden of broken technologies using hacks, etc... If we become less tolerant of crap, there will be less crap. As long as we accept it by using workarounds, etc... there will be more shitty things to come.

wahnfrieden 14y ago
CSS's flexible box model will eliminate that issue once it has wider support. There is a solution in the pipeline, it's just a matter of time. Not the best link, but here's some more recent info: http://css-tricks.com/old-flexbox-and-new-flexbox/ http://css-tricks.com/old-flexbox-and-new-flexbox/
rglover 14y ago
What's difficult about centering a box? Was that just sarcasm? A couple of approaches: Margin Auto w/ a fixed width Absolute 50% w/ negative margins Text-align center parent w/ inline-block display on children If it was sarcasm, disregard my stupidity.
- TruthElixirX 14y ago
  I think it was a hyperbole, but there really is a lot of dumb shit in web design.
- borplk 14y ago
  That's still non-intuitive. Just do a search about centering (or X problem in CSS) and see the thousands of threads and questions and corner cases, hacks and exceptions. The whole thing feels like you are stretching something beyond what it was intended to be used for. Things like element positioning should be so so simple that if you search about it, you get nothing back because no one had a problem to ask for solutions. Although I must say I'm not mocking CSS in particular, most web technologies feel this way because they were designed many years ago for a web that was supposed to have simple 'documents' like an article, text and paragraphs and today each component of it is expected to do a lot more. It's not getting all that much better either because each new version and improvement is building on top of the previous decisions, etc...

johnx123-up 14y ago

Anybody knows, why can't we use GIF instead?

codeka 14y ago
You probably could, but given that GIF files are limited to a 256-colour palette, it would probably look pretty horrible. Especially for such a large image.
- eliaskg 14y ago
  Also you would end up having varying frame rates in different browsers.