Thursday, June 4th, 2009
CSS Video Effects
Category: Showcase, Video
, WebKit
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)
CSS:
-
-
.reflector
-
{
-
-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)));
-
}
-
-
.fader
-
{
-
-webkit-transition-property: opacity;
-
-webkit-transition-duration: 550ms;
-
-webkit-transition-timing-function: ease-in-out;
-
}
-
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:
-
-
jQuery.map(movies, function (movie)
-
{
-
var thumb = jQuery('<a href="#" title="' + movie.title + '"><img src="' + movie.thumb + '" class="reflector" /></a>');
-
-
thumb.click(function ()
-
{
-
var video = jQuery('<video id="cell" autoplay="true" class="fader reflector" />').get(0);
-
video.style.opacity = 0;
-
jQuery("#holder").empty().append(video);
-
-
video.addEventListener("loadstart", function ()
-
{
-
jQuery(body).addClass("darker");
-
-
setTimeout(function ()
-
{
-
jQuery(menu).css("visibility", "hidden");
-
video.style.opacity = 1;
-
}, 550);
-
}, false);
-
-
jQuery(video).attr("src", movie.link);
-
-
var finished = function ()
-
{
-
video.style.opacity = 0;
-
setTimeout(function ()
-
{
-
video.pause();
-
jQuery(menu).css("visibility", "visible");
-
jQuery(body).removeClass("darker");
-
}, 550);
-
return false;
-
}
-
-
video.addEventListener("ended", finished, false);
-
-
jQuery(video).click(finished);
-
-
return false;
-
});
-
-
jQuery("#menu").append(thumb);
-
});
-
Nicely done!
Related Content:
3.4 rating from 29 votes
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.
this is awesome and works great in titanium. there’s so much that will be possible with this feature.
@tj111: Not sure but Chrome will so webkit may end up supporting it.
Safari 4 beta supports it. Tested on http://openvideo.dailymotion.com which serves most of Dailymotion content encoded in Ogg Theora.
Safari 4 supporting Ogg Theora is excellent news! :)
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.
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.
This is really nice. Thanks to Charles for his experiments and thanks Dion for sharing the results!