Custom HTML5 video player with CSS3 and jQuery. Learn how to build an easily customizable HTML5 video player, including packaging it as a simple jQuery plugin.
Building a custom HTML5 video player with CSS3 and jQuery
By Cristian-Ionut Colceriu · 28 Jul, 2010
Published in: opacity, html5, css3, jquery, video, Transitions
The HTML5 <video> element is already supported by most modern browsers, and even IE has support announced for version 9. There are many advantages of having video embedded natively in the browser (covered in the article Introduction to HTML5 video by Bruce Lawson), so many developers are trying to use it as soon as possible. There are a couple of barriers to this that remain, most notably the problem of which codecs are supported in each browser, with a disagreement between Opera/Firefox and IE/Safari. That might not be a problem for much longer though, with Google recently releasing the VP8 codec, and the WebM project coming into existence. Opera, Firefox, Chrome and IE9 all have support in final builds, developer builds, or at least support announced for this format, and Flash will be able to play VP8. This means that we will soon be able to create a single version of the video that will play in the <video> element in most browsers, and the Flash Player in those that don’t support WebM natively.
Full article can be viewed here: http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/