Thursday, June 4th, 2009

CSS Video Effects

Category: Showcase, Video, WebKit

<p>Charles Ying has been playing with some new cool features that just made it to WebKit Nightly, specifically CSS effects with HTML5 video.

With some cool CSS such as below, Charles gets the nice effect of reflection live on HTML5 video (which is playing a .mov that you select)

  1. .reflector
  2. {
  3.     -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)));
  4. }
  5.  
  6. .fader
  7. {
  8.     -webkit-transition-property: opacity;
  9.     -webkit-transition-duration: 550ms;
  10.     -webkit-transition-timing-function: ease-in-out;
  11. }

You will see that in a few lines of jQuery he builds the movie list and fades in and plays the video on click, all via:

javascript
< view plain text >
  1. jQuery.map(movies, function (movie)
  2.     {
  3.         var thumb = jQuery('<a href="#" title="' + movie.title + '"><img src="' + movie.thumb + '" class="reflector" /></a>');
  4.  
  5.         thumb.click(function ()
  6.         {
  7.             var video = jQuery('<video id="cell" autoplay="true" class="fader reflector" />').get(0);
  8.             video.style.opacity = 0;
  9.             jQuery("#holder").empty().append(video);
  10.  
  11.             video.addEventListener("loadstart", function ()
  12.             {
  13.                 jQuery(body).addClass("darker");
  14.  
  15.                 setTimeout(function ()
  16.                 {
  17.                     jQuery(menu).css("visibility", "hidden");
  18.                     video.style.opacity = 1;
  19.                 }, 550);
  20.             }, false);
  21.  
  22.             jQuery(video).attr("src", movie.link);
  23.            
  24.             var finished = function ()
  25.             {
  26.                 video.style.opacity = 0;
  27.                 setTimeout(function ()
  28.                 {
  29.                     video.pause();
  30.                     jQuery(menu).css("visibility", "visible");
  31.                     jQuery(body).removeClass("darker");
  32.                 }, 550);
  33.                 return false;
  34.             }
  35.            
  36.             video.addEventListener("ended", finished, false);
  37.  
  38.             jQuery(video).click(finished);
  39.  
  40.             return false;
  41.         });
  42.  
  43.         jQuery("#menu").append(thumb);
  44.     });

Nicely done!

Related Content:

Posted by Dion Almaer at 12:28 pm
8 Comments

+++--
3.4 rating from 34 votes

8 Comments »

Comments feed TrackBack URI

Does anyone know if webkit supports ogg video, or if they are just supporting .mov because of apple? I hope they support ogg, otherwise this html5 video will go nowhere and people will just stick to flash.

Comment by tj111 — June 4, 2009

this is awesome and works great in titanium. there’s so much that will be possible with this feature.

Comment by jhaynie — June 4, 2009

@tj111: Not sure but Chrome will so webkit may end up supporting it.

Comment by ReyBango — June 4, 2009

Safari 4 beta supports it. Tested on http://openvideo.dailymotion.com which serves most of Dailymotion content encoded in Ogg Theora.

Comment by genezys — June 4, 2009

Safari 4 supporting Ogg Theora is excellent news! :)

Comment by andysky — June 4, 2009

Safari 4 only supports Theora if you use the XiphQT plugin. DailyMotion detects the browsers and servers an .mp4 file via the video element if the user is using Safari.

Comment by doublec — June 4, 2009

That’s awesome! It doesn’t look THAT good for pictures, but as for videos – enhances the feeling very well. Too bad can’t use it yet. darn.

Comment by gustavs — June 5, 2009

This is really nice. Thanks to Charles for his experiments and thanks Dion for sharing the results!

Comment by VideoSmash — January 26, 2010

Leave a comment

You must be logged in to post a comment.