August 3, 2010

Building a custom HTML5 video player with CSS3 and jQuery

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

Introduction

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.

The other major barrier to consider is building up a custom HTML5 <video> 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 <video> 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 <video> 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:

We’ll use jQuery for easier DOM manipulation, and jQuery UI for the slider controls used for seeking and changing the volume level. To build a scalable solution, we’ll wrap everything up in a jQuery plugin.

Video controls

As professional web designers, we want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari (see Figure 1 for the controls in each browser). If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch. This is not as hard as it seems.

Figure 1: Native browser video controls across different browsers

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

Basic markup for controls

First, we’ll need to create the actual markup for the video controls. We’ll need a Play/Pause button, a seek bar, a timer and a volume button and slider. We’ll insert the markup for the controls after the <video> element, and wrap them up in another element.

We’ve used classes instead of IDs for all elements, to be able to use the same code for multiple video players on the same page.

Packaging the player as a jQuery plugin

After creating the markup we’ll have to tie our elements to the media elements API, in order to control the video’s behavior. As noted before, we’ll package the player as a jQuery plugin, which will also aid reuse on multiple elements.

Here we are using jQuery to create the video player markup dynamically (but not the video player itself), and removing the controls attribute once the script loads. That’s because in cases where the user has JavaScript disabled, these controls will be useless, and he/she won’t even get the native browser controls to the video element. It makes a lot more sense to start with the controls attribute present in case the script fails to load, and then removing it so the player will use our custom controls only after the script successfully loads.

Next, we’ll have to target each of the elements in the controls, in order to be able to add listeners.

Most browsers provide a secondary set of controls for the video in the right-click (ctrl-click on a Mac) context menu. Because of the way we are putting this together, if a user activated these alternative controls it would break our custom controls. In order to avoid this we’re attaching events to the Play/Pause button itself, and the “Play”, “Pause” and “Ended” listeners of the video player.

We’re also adding and removing classes from our button to change the look of it, depending on the state of the video (Playing or Paused).

For creating the seek slider we’ll use the jQuery UI Slider component.

As you can see, we’re using a recursive function, while reading the readyState of the video. We have to keep polling the video until it is ready, otherwise we can’t determine the duration, and can’t create the slider. Once the video is ready, we initialize the slider, and also show the controls.

Next we’ll create the timer, and attach it to the timeupdate listener of the video element.

Finally we’re going the remove the controls attribute from the <video>, because by this point our own custom controls are set up and we want to use those instead of the browser defaults.

$gVideo.removeAttr('controls');

Now that we have our plugin all done, we can call it on any video element we want, like so.

$('video').gVideo();

This will call the plugin on all the video elements on the page.

Look and Feel

And now for the fun part, the look and feel of the video player. Once the plugin is ready, customizing the controls is really easy with a little bit of CSS. As you’ve notice we haven’t added any styling to the controls. We’ll use CSS3 for all the customizations regarding the player.

First, we’ll add some style to the main video player container. We’ll use this as the main chrome for the player.

We’ve floated it left, to prevent it from expanding to the full width of the player, instead keeping it restrained to the width of the actual video element. We’re using gradients and border radius to add polish, plus an inset box shadow to emulate the gradient effect in Opera, as it does not yet support gradients (as of 10.60, the latest version at the time of writing).

Next we’ll float all the controls to the left, to align them horizontally. We’ll use opacity and transitions on the Play/Pause and Volume Mute/Unmute buttons to create a nice hover effect.

I’m sure you followed the JavaScript part carefully, and saw that we’re adding and removing classes on the Play/Pause button depending on the state of the video(Playing/Paused). That’s why the ghida-paused-button class overwrites the background property of the ghinda-video-play class.

Now for the sliders. As you saw before, we’re using the jQuery UI slider control for both the seek bar and the volume level. This component has its own styles defined in jQuery UI’s stylesheet, but we’ll completely overwrite these to make the look of the slider more in keeping with the rest of the player.

Currently the volume slider is also visible at all times, positioned next to the volume button. We’ll change this so the slider is hidden by default, and shows up only when we’re hovering the Mute/Unmute button, to make it look a bit more dynamic and neater. Again, transitions are our answer here:

We’re hiding the volume slider by default, and giving the volume container a small fixed height that just fits the width of the volume button. We’re also assigning transitions to both.

When the volume button is hovered, its height increases via the specified transition; we then use the .ghinda-volume-box:hover .ghinda-volume-slider descendant selector to transition the volume slider into view.

With basic CSS knowledge and some new CSS3 properties, we’ve already created a nice interface for our player, it looks like Figure 2:

Figure 2: Our finished video player.

Themeing the player

As you probably noticed, when creating the jQuery plugin, we’ve defined a set of default options. These options are theme and childtheme, and can be changed when calling the plugin, allowing us to easily apply custom themes as desired.

A theme represents a completely new set of CSS rules for every single control. A child theme on the other hand is a set of CSS rules that builds upon the rules of an existing theme, adding or overwriting the “parent” theme’s style.

We can specify both of there options or only one, when calling the jQuery plugin.

$('video').gVideo({
childtheme:'smalldark'
});

In the above example code we are calling the plugin with the smalldark child theme specified. This will apply our default parent theme, and then apply our child theme over the top of it, overwriting a small portion of the rules set by the parent theme. See Figure 3 for the Smalldark theme in action.

Summary

Building our own custom video player with HTML5 video, JavaScript and CSS3 is fairly easy. By using JavaScript only for the actual functionality of the controls, and CSS3 for everything that involves the look and feel of the player, we get a powerful, easily customizable solution.

Like this:

Related

Your site is pretty interesting to me and your topics are very relevant. I was browsing around and came across something you might find interesting. I was guilty of 3 of them with my sites. “99% of site managers are guilty of these five mistakes”. http://bit.ly/tJJczA You will be suprised how fast they are to fix.

In the most recent James Bond movie, Daniel Craig spent some time in the eerie emptiness of an abandoned island that the villain Silva had claimed as his lair. What many don’t realize is that this setting was actually based on a real place.It’s called Hashima, but it’s better known by its nickname Gunkanjima (or “Battleship Island”), and thanks to Google Str […]

Aircraft-carrier will be stripped down and turned into everything from bridge foundations to cooking utensilsVessel - which led forces during the invasion of Iraq in 2003 - was sold by the Ministry of Defence for a reported £2.9mBy ANNA EDWARDSPUBLISHED: 23:16 GMT, 16 July 2013 | UPDATED: 07:25 GMT, 17 July 2013Carved open with its structure cut to pieces, i […]

GIVING US SPACE: WHAT YOU CAN LEARN FROM NASA ABOUT CONTENT AND SOCIAL MEDIABY: JESSICA GROSEHow NASA has created a steady stream of fascinating, accessible content to bring science and space closer to home.http://www.fastcocreate.com/1681812/giving-us-space-what-you-can-learn-from-nasa-about-content-and-social-mediawhat happen

Solar Power Beamed From Space Inches Toward RealityThere is a lot of sunlight in our atmosphere. But we have no way to get power from it down to Earth, because a miles-long extension cord isn’t practical. But scientists are working hard on other solutions.http://www.fastcoexist.com/1680058/solar-power-beamed-from-space-inches-toward-realitywhat happen

Amazing Photos Of Earth From Above, From Canada’s Tiny Space ProgramA very social media-savvy astronaut from the frozen North recently took over on the International Space Station, and the images he’s beaming back are incredible. http://www.fastcoexist.com/1681722/amazing-photos-of-earth-from-above-from-canadas-tiny-space-program#1 what happen

People reach for their mobile phones throughout the day for help getting things done. And it's often a mobile app that delivers what they need—whether it's a new pair of rain boots or a puzzle game to pass the time during a commute.Universal App campaigns help connect your app with more of these app-happy consumers. Today, we are simplifying the na […]

The performance benefits and security guarantees offered by AMPHTML ads, which are display ads created using the AMP framework, translate to better advertiser ROI, publisher revenue and overall better user experience. Because of this, Google has expanded serving AMPHTML ads not only to AMP pages, but also to regular web pages. As of January this year, 12% of […]

Shoppers turn to Google to find products that are just right for them. And you rely on Google Manufacturer Center to ensure your products are represented well. In fact, more than 5,000 brands use Manufacturer Center to improve their presence on Google. To kick off the new year, we’re making those interactions even better by introducing new ways to show high- […]

People today exercise greater control over what they view and when—and on which screens—they view it. They watch sitcoms in taxis and on trains, and stream news and documentaries at the gym. All of which contribute to a striking new reality: TV is no longer a stationary box anchored to a corner in your living room.People also expect the same content they lov […]

At YouTube, we’re on a constant quest to give people the perfect viewing experience. But over the years, what that looks like has changed significantly.The way we watch video is always changing. And we want to keep advertisers abreast of these trends, with new ad experiences molded to the new ways people watch. This was the spirit behind our introduction of […]