sQuo Posted April 23, 2012 Share Posted April 23, 2012 Building a custom HTML5 video player with CSS3 and jQuery Introduction The HTML5 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 element in most browsers, and the Flash Player in those that don't support WebM natively. The other major barrier to consider is building up a custom HTML5 player — this is where a Flash-only solution currently has an advantage, with the powerful Flash IDE providing an easy interface with which to create a customized video player component. IF we want to write a customised player for the HTML5 element we need to handcode all the HTML5, CSS3, JavaScript, and any other open standards we want to use to build a player! And this is where this article comes in. This is the first of a series in which we will look at building up an easily customizable HTML5 player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation. In this article we will look at: Video controls Basic markup for controls Packaging the player as a jQuery plugin Look and Feel Themeing the player This is the hidden content, please Sign In or Sign Up Link to comment Share on other sites More sharing options...
.webp.8407a83ac96563f75e1c428a1f0d4c3e.webp)
.webp.9a04cec050a656fab081ac190f971c3f.webp)
Hack Tools Resurrection
sQuo
Recommended Posts