The syntax is a key:value pair, with the key being a keyword prefixed with data–, like so:

<div data-foo="bar"></div>

Note that this is not intended to compete with or replace Microformats or RDFa; data attributes were developed only to store custom data [about an element] when there is no more appropriate attribute or element available.

jQuery introduced support for data attributes in version 1.4.3, which was released in October 2010. You use the existing data() method to get and set values. Getting a value involves just using the keyword, as in this example which operates on the markup above:

var baz = $('div').data('foo');

This would set the value of ‘bar’ to the baz variable. jQuery’s implemenation is so clever that the variable will take on the correct value type — string, number, boolean — automatically. In the example above it would be a string, but given markup like this:

<div data-retail="3.99"></div>

The value of the variable would be provided as a number type. You can also use JSON syntax in data attributes, like so:

<div data-foobar='{"foo":"bar"}'></div>

Note that the attribute uses single quotes while the key:value pair inside are in double quotes; this is required to be valid JSON syntax. To access this with jQuery, just add the key name as an object at the end of the string:

var baz = $('div').data('foobar').foo;

This will once again instruct the variable baz to have the value ‘bar’.

Also released was the first alpha of jQuery Mobile, a touch-optimised amalgam of jQuery and jQuery UI. It’s actually a little buggy on my Galaxy S Android phone, but as it’s an alpha release that’s perfectly forgiveable. It looks pretty smart and comprehensive.

Their ease-of-use has a slight drawback, however: it’s easy to rely on them too much, and lose sight of new developments in JavaScript. This was the reason for my not really paying much attention to an exciting recent introduction, the Selectors API, until I had cause to use it on a personal project.

I may be completely out of the loop, and perhaps everyone knows about this already; in case you don’t here’s a quick overview. The Selectors API has a pair of methods which allow you to select elements by using CSS selectors in the argument string; for example:

var foo = document.querySelector('.foo p');
var bar = document.querySelectorAll('.foo p');

The first method, querySelector(), returns the first element matching the specified argument; the second, querySelectorAll() returns a NodeList of all elements matching the argument. So given the following markup:

<div class="foo">
<p>It was the best of times.</p>
<p>It was the worst of times.</p>
</div>

The variable foo would return the first paragraph, and the variable bar would return a list of both paragraphs — so you could loop through the list with for, or get a single property value:

var barOne = bar[0];

Anyone used to working with libraries like jQuery should find this pretty easy to grasp, as many already use a syntax similar to this. Probably the best news about this new API is that it’s already well implemented; Firefox, Chrome/Safari, Opera and IE8+ all support it.

One other happy discovery regarding JavaScript: the IE9 beta has support for the addEventListener() method. I’m pretty sure I don’t need to explain that one.

Another approach we can take to the problem is to use JavaScript to detect SVG support. Alexis Deveria wrote a script which detects if your browser supports SVG and, if not, replace the images with PNG. It’s a good script, but I wondered if there was an alternative.

I’ve come up with a script based on Alexis’s, but which simply adds a class to the body of the document, allowing you to specify alternative images if SVG support isn’t implemented on a visitor’s browser. Update: Changed the script to use onload instead of addEventListener to ensure compatibility with IE. Still looking into Opera issue.

Here’s the script:

function setCSS() {
  var docBody = document.getElementsByTagName('body');
  docBody[0].className = 'svg';
}
function SVGDetect() {
  var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
  var img = document.createElement('img');
  img.setAttribute('src', testImg);
  img.onload = setCSS;
}
img.onload = SVGDetect;

This creates an img element with an SVG data URI and tests to see if the browser loads it; if it does, it adds a class of svg to the body. To finish the method you just need to add alternatives in your stylesheet:

div { background-image: url('image.png'); }
.svg div { background-image: url('image.svg'); }

Here’s a demo: Using SVG in CSS with JavaScript detection. View it in Safari, Chrome, Opera, IE9 beta or Firefox 4 beta to see the SVGs, and Firefox 3.6 or IE8 to see the PNGs. Try zooming in to the page to see the advantage of using SVG.

There are a couple of drawbacks with this method that need to be ironed out: first is that in theory it doesn’t work in browsers which allow SVG in the img element but not in background-image — in practice, however, there are no browsers where this is an issue; second is that it loads the PNG images first, and there’s a brief delay before the SVG images replace them — the script definitely needs tweaking to stop this, so consider it Version 0.1.

This technique is for the CSS background-image only; if you want to replace img elements I advise you to use Alexis’ script instead. As always, if you see a way in which my code could be optimised, don’t hesitate to let me know.

In the article I explain how to build a dynamic Contact area, as we did on our recent redesign of Preloaded.com, using the Web Storage API and the BBC’s Glow Javascript library.

I’m not sure what the rights situation is with this article, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the meantime, you can buy a copy of Net magazine in the UK at all good newsagents, as the saying goes (I don’t know if it will be in overseas editions also).

On the subject of print, I’m also currently writing a book about CSS3 which should be published later this year. I’ll have more information on that nearer the time.

In this (somewhat belated) follow-up I’m going to explore building a more interactive set of controls using a JavaScript UI library; I’m going to use Glow, but it could easily be adapted to jQuery UI or similar.

You can see the player I’ll be using as an example here — although it must be stressed that it’s not a final version, for reasons I’ll cover at the end:

HTML5 & Glow Video Player

The markup

The video player itself is pretty straightforward:

<video autobuffer controls height="180" poster="BBB_poster.jpg" width="320">
  <source src="bbb.mp4" type="video/mp4">
  <source src="bbb.webm" type="video/ogg">
  <source src="bbb.theora.ogg" type="video/ogg">
  <img alt="Film Poster" height="180" src="BBB_poster.jpg" width="320">
</video>

The video element has the controls attribute set, which we’ll remove with JavaScript later. Note also the poster attribute, which displays a still image until the video is ready to be played, at which point it displays the first frame instead.

Next there are two source elements, which serve the video to Firefox, Opera and Chrome (ogg) and Safari (mp4). Finally there’s an img element, which displays if the browser doesn’t have video support. Update: Added WebM support.

As for the controls, rather than list them here I’ll ask you to view the source to see what I’ve done. Basically I’ve added a bunch of form elements; two input image types for the play and volume icons, and two input text types for the duration and volume sliders. The latter two aren’t necessary, but I wanted them there for accessibility reasons.

The style

How I’ve styled the player doesn’t matter too much; I’ve been influenced by the Quicktime player for the layout of the controls, but really the CSS isn’t too important here. The only thing to note is that I’ve added some rules here for screen overlays, which I’ll explain in due course:

.overlay { background-repeat: no-repeat; height: 180px; position: absolute; width: 320px; }
.paused { background-color: rgba(0,0,0,0.2); background-image: url('pause.png'); background-position: left bottom; }
.play { background-image: url('play.png'); background-position: center center; }

The JavaScript

You can see all the script I’ve used in the file video.js. I’ll go through some of the more important functions in turn.

Setting up

The first thing I’ve done is removed the native controls from the player for people who have JS enabled, so as not to provide two conflicting sets of controls:

video[0].controls = false;

Next I’ve defined some of the key variables which I’ll be using throughout the script. One of those variables, volumeSlide, is assigned to one of Glow’s native widgets, a Slider; this will be used to control the volume:

volumeSlide = new glow.widgets.Slider('#volume',{bindTo:'#vol_count', buttons:false, step:0.1, min:0, max:1, size:70, val:1});

You can see what all the options do in the Glow documentation, but the key ones I’ve set are for it to appear in <div id=“volume”>, to have a minimum value of 0 and a max of 1, and to increment in steps of 0.1. This matches the volume setting for the video element.

Waiting for the metadata

For the next step I’m going to create another slider, but this time for the duration/seek bar. In order to do this, however, I need to query the video’s metadata to know what the duration of the video is, and in Safari (which uses mp4 video) that doesn’t load before the rest of my JS has run.

To get around this I’ll poll the readyState attribute every half a second — with the setInterval function — until it’s value is at least 1, which means the metadata has loaded; once that’s done, I’ll load the slider:

t = window.setInterval(function() {
  if (video[0].readyState >= 1) {
    window.clearInterval(t);
    durationSlide = new glow.widgets.Slider('#vid_duration',{bindTo:'#duration_count', buttons:false, step:1, min:1, max:Math.round(video[0].duration-1), size:260, val:0});
    playVid();
  }
},500);

So you can see there that I’ve created the slider with a minimum value of 1 and a maximum of the duration of the video (in seconds), to increment in steps of 1. After that the setup is complete so I can begin the actual playback functions.

Playback controls

There are too many functions to go into in detail, so I’ll quickly go through what happens. First an overlay is placed over the top of the video, which begins playback when clicked. Next, event listeners are added to the play button, the volume icon, and the volume and duration sliders.

The listener on the play button runs the function playControl, which determines the state of playback (ended, paused or playing) and either plays or pauses the video accordingly. It also updates the icon to reflect its action (if it is paused, the icon changes to a play icon, and vice versa), and adds the pause overlay onto the video screen when relevant:

function playControl() {
  if (video[0].paused === true) {
    video[0].play();
    /* Further functions here */
  };
} else if (video[0].ended === true) {
    video[0].play();
     /* Further functions here */
} else {
    video[0].pause();
     /* Further functions here */
}

There’s a function called startCount which uses setInterval to move the duration slider along by one second while the video is playing, and a function called pauseCount which uses clearInterval to pause.

The muteToggle function does what you expect, and mutes the video; it also changes the volume icon to show that state, and disables the volume slider while it is active.

A further function, volumeIcons, sets the state of the volume icon; there are four possible icon states, which are used depending on the value of the volume.

And the last function, secondsToTime, converts second values into hour/minute/second values, allowing for the timer to be updated. This is done every second by the startCount function, and also used for the function which is called from the event listener on the duration slider.

That event is probably worth looking at in detail:

glow.events.addListener(durationSlide,'slideStop',function(event){
  video[0].currentTime = event.currentVal;
  var currentSecs = secondsToTime(event.currentVal);
  vidTimer.text(currentSecs.h + ':' + currentSecs.m + ':' + currentSecs.s);
});

Using the slideStop event I can check when the slider has been moved, and first set the video to begin playback from that point, then update the timer with the same values. The volume slider has a similar event set on it.

Next steps

So as a reminder, here’s what I have so far:

HTML5 & Glow Video Player

Please bear in mind that this is very much a work in progress; I started writing the controls without Glow and introduced it at a later stage, so some of the JavaScript could do with being optimised.

The markup for the controls could also do with some extra work to make them fully accessible, which they probably aren’t right now. Also, all of the dimensions are built around this video size, and won’t scale if different sized videos are used.

I hope to return to this topic when I have more time, and create a robust set of video player controls which can be used in any site without extra work.

Please feel free to let me know if you encounter any bugs or oddities as you use this; it will help with the next stage of development.

At the beginning of the redesign project we agreed some design tenets: the new site should be a best-practice showcase and an opportunity to learn and use some of the latest web technologies; and it should employ existing services where practical.

To achieve the former we targeted users with the most modern web browsers, using the graceful (or progressive) enhancement method to ensure that even with older technology, no-one would be left unable to read all of the site content.

The most obvious example of this is in the design of the buttons; users with a decent browser (e.g. Firefox or Safari) would see these with rounded corners — because these browsers are capable of producing them natively with the CSS3 border-radius declaration — while users of other browsers (e.g. Internet Explorer) would see them square:

Browser comparison. Top: Safari 4; Bottom: Internet Explorer 8

While all users see the same content, those with a modern browser are rewarded with a slightly improved experience. We used other variations of this method elsewhere throughout the site.

Technology

Web Fonts

In order to achieve brand consistency we had a font in mind which we were going to implement using the Cufón Javascript technique. During the process of adding this the font foundry clarified their licensing, excluding this font from online use in this way, so we had to scrap it and look for a different angle.

While we were trying out various alternatives using Flash and Javascript (we now know more about font licensing and implementation than we ever wanted to), a new solution presented itself. Using Font Squirrel’s web font generator and Paul Irish’s bulletproof syntax we were able to use the browsers’ own built-in font support (with @font-face) and achieve our desired result for 95% of our users; the other 5% will see a standard system font, as per the graceful en­hance­ment method.

Glow

Glow is a BBC-developed Javascript library, with a jQuery-like syntax but a focus on interface widgets, which makes it easy to create animations and UI elements for websites. Having already used it briefly on a project earlier in the year, we decided it would be a good fit for what we wanted — and something new to learn.

The image carousel on the homepage was made with Glow, as was the slide-down contact details on each page, and the lightbox overlay effect for screenshots on the case study pages.

The only drawback we found with Glow was a bug in their carousel rendering in IE8; this meant that we had to force compatibility view for IE8 to display as IE7, but it’s something we’re hoping to change after the next Glow release.

HTML5

Under the bonnet we used some cutting-edge code to mark up our content. HTML5 is a very new specification and still somewhat in a state of flux, but we used it in two different ways:

First was to provide semantic structure to the pages with the new structural elements (the definitions of which are still being discussed, so may not be completely correct — HTML5 Doctor was an invaluable resource for this).

Second, and of more impact to the user, was using sessionStorage to take advantage of the opportunities for storing data in the user’s browser. We used this in conjunction with Glow to create the carousel and slide-down effects; if you have a modern browser these are created only once and held in the browser’s storage, whereas older browsers create them anew each time you visit the page — this leads to the site being somewhat snappier in modern browsers.

Conclusion

Working with brand new and cutting edge features meant spending time chasing down false leads and up blind alleys, but was a great way of learning and gave us invaluable experience to take into the sites we make for our clients in future.

There are still one or two changes which we’ll be rolling into the site in the coming months, but if you spot any problems — or just want to talk more in-depth about the methods and techniques we’ve used — don’t hesitate to leave a comment.

Implementation is spotty at the moment; Firefox 3.5 supports it, as does Safari for iPhone (although not on the desktop, AFAICS). But it’s so simple to use, I’ve no doubt it will be adopted rapidly.

I’ve put together a small demo of the GeoLocation API in action; it uses data from the Arts Council England website, so visitors from outside of England won’t get any meaningful results from this, I’m afraid. Visitors from England will probably get best results using a mobile device (such as an iPhone).

First, the JavaScript function tests that the browser supports the API:

var hasGeoLocation = navigator.geolocation ? true : false;
if (hasGeoLocation === true) { ... }

If so, it requests the current position from the browser using the getCurrentPosition method (the user will have to give permission for this) and passes the result into a function:

navigator.geolocation.getCurrentPosition(function(position) {
    getJSON(position.coords.latitude,position.coords.longitude);
});

This result is used in the latitude and longitude attributes of the coords object, which I then use for the rest of my function (using jQuery’s getJSON function to mine microformatted data from the map page of the Arts Council England website, transforming it using Optimus, then parsing it back into HTML for my demo).

There’s a lot more to this, of course; the API is quite extensive, covering altitude and heading as well as lat/long, and there’s a massive amount of geotagged data available (Flickr photos, for example). Hopefully my demo serves as an example of how easy it is to make the move into the mobile space.

A quick disclaimer: my JavaScript is a little rusty, so may not use best practice throughout; if you can see a way my code could be better, don’t hesitate to let me know.

Anyway, here’s the finished demo.

Getting started

First you must include the video element. There are a number of attributes available, but for our purposes we need define only the src, which is the URI of our video file Update: changed the markup to use the more correct source elements inside video.

<video>
  <source src="filename.mp4">
  <source src="filename.webm">
  <source src="filename.ogg">
</video>

The video has been encoded twice, once in Theora and once in H264, to cater for different browsers; Kroc Camen’s Video for Everybody explains the reasons behind this (and how to make a bulletproof player). Update: added WebM support.

Having marked up a few controls with HTML (I’ve used id attributes on all of them to make this demo easier), the next step is to write the JavaScript to access the API (which is well explained in this article at the Mozilla Developer Center) for the controls.

The first and most important control is the play/pause button; for this I’ve written a function which checks so see if the paused attribute is true or false, and triggers the play() or pause() methods accordingly:

play.addEventListener('click',playControl,false);
function playControl() {
    if (video.paused == false) {
        video.pause();
        this.firstChild.nodeValue = 'Play';
        pauseCount();
    } else {
        video.play();
        this.firstChild.nodeValue = 'Pause';
        startCount();
    }
}

You’ll notice that it also updates the control text to indicate the action that the control will perform. There are also two function calls — pauseCount() and startCount() — which control the timer shown next to the play button.

The timer uses the currentTime and duration attributes (although the latter doesn’t seem to be currently supported by Chrome). To get the current time I’ve used setInterval to create a loop:

function startCount() {
    t = window.setInterval(function() {
        if (video.ended != true) {
            timer.firstChild.nodeValue = Math.round(video.currentTime + 1);
        } else {
            play.firstChild.nodeValue = 'Play';
            window.clearInterval(t);
        }
    },1000);
}

First it uses an if…else statement on the ended attribute to check that the video has not finished playing; if it hasn’t, it updates the timer with currentTime (plus a little maths). If the video HAS finished, it uses clearInterval to stop the loop; this is also used in a function to pause the timer if the pause control is used:

function pauseCount() {
    window.clearInterval(t);
}

To complete the controls we have functions to increase and decrease the volume. Both are very similar:

vUp.addEventListener('click',volUp,false);
function volUp() {
    if (video.volume < 1) {
        video.volume = Math.round((video.volume + 0.1)*10)/10;
        volume.firstChild.nodeValue = Math.round(video.volume*10);
    }
}

First they check that the minimum/maximum limits have not been reached, and increase/decrease the volume attribute if not. Volume is on a scale of 0 to 1, and this function changes that value in increments of 0.1. The on-screen volume counter is also changed accordingly.

There are a number of small details elsewhere in the script, so feel free to have a dig through to see what else I’ve done; here’s another link to the finished demo.

Further steps

I’ve obviously used a little CSS to tidy the controls up, but a lot more could be done; using images instead of text, for example, or perhaps using something like jQuery’s user interface library to make more dynamic controls.

This article was intended only to show how easy it is to get started; what will be exciting is to see how these techniques can be expanded upon.

Update: If you found this article useful, you may be interested to know that I returned to this subject in a later post, Building a better HTML5 video player with Glow.