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.

The way around it is to quickly check that the command is supported by your browser, and to provide an alternative (I use that old standby, alert) if not; and the quickest way to do that is with the if…else shorthand:

window.console ? console.log(foo) : alert(foo);

One quick technique I used yesterday was to make three elements of equal height; it’s very simple and won’t cope with dynamic content, but is perfectly suitable for simple page layouts.

The code simply takes the elements involved (I’m using two in this example), calculates the height of the tallest, and sets the heights of the others to match:

var highestCol = Math.max($('#element1').height(),$('#element2').height());
$('.elements').height(highestCol);

There’s nothing groundbreaking about this, and I’m certainly not claiming to have invented the technique (there’s another version here, for example); I provide it here only as an example of how jQuery makes layout problems easy to resolve.

I’ve since discovered that there’s a plugin which will do this for you, which is much more useful if you want to work with multiple elements, but mine has the advantage of being only two lines!

Sessions which I found particularly interesting should be covered in more detail later, and I’ll update here as I find more presentations.

Designing our way through data (Jeff Veen)

How good design can make sense of data (and how bad design can complicate it too much), and using user feedback to make data findable.

For example: BBC and Edenbee (Tom Cartwright & Clare Roberts, and James Box)

On the challenges posed by redesigning on of the most visible homepages in the world, and on how to build a social community.

Getting your hands dirty with HTML5 (James Graham & Lachlan Hunt)

Introducing the new structural elements (which I will definitely write more about later), and what HTML5 you can use right now.

Underpants over my trousers (Andy Clarke)

What inspiration we can take from the narrative devices of comics? Andy Clarke is always an entertaining speaker, and this was no exception — although I’d seen some of it before.

Details make the difference (Dan Rubin)

One of the best and most practical of the sessions I saw; tips on how to make compelling designs and details.

Professional front end engineering (Nate Koechley)

A call for professionalism in the web development community. Very interesting, although recapped some of the points from last year’s talk.

Building on the shoulders of giants (Jonathan Snook)

How to make practical use of frameworks, libraries and APIs in your work. Revealed some new tools which I will check out.

For example: The Guardian and Dopplr (Marc Pacheco and Matt Biddulph)

Similar to the earlier ‘For example’ session; a look at the practicalities of building a large content portal and a social community. The latter displayed how to take advantage of the many APIs that exist.

WAI-ARIA – it’s easy (Steve Faulkner)

I didn’t know what WAI-ARIA was before this session, but this was a comprehensive and practical introduction.

Global design: characters, language, and more (Richard Ishida)

Another very practical session, which I really wish I’d taken more notes on. Why character encoding matters and how you can use it.

The first I noticed was the move to a newer, more Ajax–y interface a few months ago. The problems with Ajax are well-documented, and one of the major problems is what’s happened to Bloglines: they’ve broken the ‘back’ button. Previously, if I wanted to go back to a link I’d seen before, I could just hit ‘back’ and it would return me to what I was looking at; not any more, unfortunately.

Which brings me to the next problem: the ‘Display items in the last session’ option has been removed. In the event that I did want to go back and look at a link I’d seen before, I could have chosen that option and brought back all the category links I’d just looked at; now I only get the option to view by time (last hour, last 6 hours, etc). It’s not the same thing; if I’m looking at my links on a Monday morning and I hadn’t checked them over the weekend, I’d have to choose ‘last 48 hours’ and wade through potentially hundreds of posts looking for the one I wanted.

I wonder if they did any usability testing before making these changes? They may not be enormous, insurmountable problems, but they’ve certainly changed my opinion towards the service; for the first time, I’m seriously thinking of choosing a new provider. The question is: to what? Google Reader seems to be the most popular, but both the problems I’ve identified above are even worse with that; the ‘back’ button takes you out of the application entirely, and the archive feature only allows you to see all previous items.

I need a web-based feed reader so I can check my feeds anywhere, and one that doesn’t break the fundamental navigation principles of the web. I don’t need loads of bells & whistles, but I would like there to be a notifier extenstion for Firefox. Is there such a service out there?