satine.org

by Charles Ying

Safari 4 CSS Video Effects

June 4th, 2009

Safari 4 Video

If you have a recent browser build of WebKit nightly, you’re going to love this movie trailers demo I’ve been hacking on. Click on the image above, select a movie trailer, and check out Safari 4′s video reflections using CSS Effects. Recent WebKit nightlies with the latest QuickTime installed give the best experience, with flawless transitioned video reflections. Safari 4 Beta also provides a decent experience, but doesn’t transition reflections.

What you are seeing is:

  • A WebKit reflection applied to a HTML5 video tag. It’s also just 1 line of CSS, and the same reflection is applied to the movie poster thumbnails as well:

-webkit-box-reflect: below 1 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(1.0, rgba(255, 255, 255, 0.5)));

  • HTML5 video events, “loadstart” and “finished” which then change the page state.

  • CSS Transitions handle all of the animation, so my code simply adds and removes the “darker” class to make the text and the movie thumbnails fade out while the video is playing. Things like stopping the video before it fully fades in just works.

Up until Safari 4, video reflections had not been working very smoothly. But times sure have changed.

I should note that video reflections are really tough to do, especially in a web browser. Flash makes it somewhat possible, but not easy, and certainly not as fast as what you see here. And I hope this example gives you a taste of what a cinematic user experience might look like in a web browser.

You may also be interested in my post on CSS CoverFlow, complete with snapping, physics, and perspective correct 3D.

Technorati Tags: , , , , ,

Tags: , , , ,

12 Responses to “Safari 4 CSS Video Effects”

  1. Seta Digital Blog » Blog Archive » links for 2009-06-05 Says:

    [...] satine.org » Safari 4 CSS Video Effects (tags: safari css html5 webkit video) [...]

  2. Keefe Says:

    Great job, certainly something worth reading

  3. HTML5 Video + CSS Visual Effects | Pat Dryburgh Says:

    [...] Wow. If you’re running Safari 4, prepare to have your mind blown. For details on what is happening, check here. [...]

  4. Brendan Falkowski Says:

    Pretty awesome demo, really surprised how smoothly it runs. Will have to start paying attention to what gets implemented in the nightlies.

  5. satine.org » A Kick Ass Browser Renaissance Says:

    [...] HTML5 Video: Everyone doesn’t want all video to go through a Flash plugin. Plus, cool video reflections! [...]

  6. satine.org » Snow Stack is Here Says:

    [...] HTML5 Video Reflections [...]

  7. ochristi Says:

    There is a little typo in the link to safari on the trailer-demo-page. (“…apple.coms/…”)

  8. Khim Says:

    i like the design of Safari 4 but i think it uses more resources compared to Opera.

  9. Sunmi Says:

    i really love the layout of Safari 4. the graphics of this browser looks much better than firefox.

  10. Frank Barchard Says:

    Could you make this Chrome friendly? The mp4 files are fine, but you have quicktime “alternate movies”. If you point straight to the actual movies it’ll work.

  11. VideoSmash Says:

    Looks great! It’s a pity it is supported by Safari 4 only. I’d love to see this feature supported by FireFox…

  12. Berthold Says:

    http://www.drblogstein.com/2009/08/buzzworthy-navell-got-blogstein.html