Archive for June, 2011

HTML5 Audio and Video comes as standard

June 26, 2011

Movie and Audio features in HTML5 are like many of the features I have discussed previously, they:
•    Have a history of controversy over Codec support
•    Specifications are too large to do real justice in these short posts
•    Are an exciting, powerful new addition that will transform the web

To date the most popular media player on the web has been Adobe’s flash player, and arguably it has been it’s most popular use. Apple’s lack of support in their devices for Flash has created a small crack in Adobe’s party, but this crack could open further into a chasm that their flash drops into! However there have been many other shenanigans in this story and rather than delve into to those murky stories I’m going to again give a brief overview of the capabilities of these new features. The good news is that HTML5 will remove the need for proprietary plug-in’s like Flash and Quicktime for playing sound and movies.

audio and video are both media elements in HTML5, and as such share common API’s for their control. In fact you can load video content into an audio element and vice versa, audio into a video element – the only difference is that the video element has a display area for content, whereas the audio element does not. Defining an audio element  and source file is pretty straightforward

<audio controls src=”my musicfile.mp3”
My audio clip

You can actually assign multiple source ( src ) files. This is to allow you to provide the audio in multiple formats, so that you can support the widest array of browsers. The browser will go through the list in sequential order and play the first file it can support, so it’s important you list them in order of the best quality first rather than by most popular format.

To load a movie you simply replace the audio element with video. Video’s can also define multiple sources. You may additionally specify the height and width of the video display area.

Next to control media you can use the following API’s:  load(), play(), pause(), I think what they do is self explanatory. canPlayType(type) can be used to check whether a specific format is supported.

Some read only attributes can be queried such as duration, paused, ended, currentSrc to check duration of the media, whether it has been paused or ended and which src is being played.

You can also set a number of attributes such as autoplay, loop, controls, volume  to automatically start media, repeat play the media, show or hide media controls and to set the volume.

These aren’t exclusive lists of API’s or attributes as there are many more but they are some of the most common features of the audio and video people will use. With video especially there are many more great things you can achieve like creating timelines and displaying dynamic content as specific points in the video (no doubt this will be used for advertising amongst other more interesting uses).

Clearly the web will get richer with full multimedia content without the perquisite of plug-ins. However developers should be aware of the various formats supported by specific browsers and aim to provide media in as many formats as possible.

Many sites today do use sound and movies, but I believe with native support and greater imagination a new world of dynamic rich media sites will change the user experience in the same way that Ajax transformed static content into the dynamic web. With it we will see new online behaviors, a topic I will cover soon, and whilst some have said the future of TV is online the web may just give it a new lease of life !

Further reading:

HTML5: The web just got richer

June 23, 2011

HTML5 graphics features will drive gaming and rich media to the web

My post about HTML5 games is a great way to experience one of the features in HTML5 that will no doubt make a huge difference to browser experiences. It’s hard to imagine in our rich multimedia world that without proprietary techniques or plug-ins that web standards do not support the simple task of drawing a line, box, circle or any shape! All that is changing with HTML5 with the Canvas API.

<canvas> </canvas>
  This is the basic canvas element notation which will set the world web alight with animation and richer experiences. It is already transforming the art of the possible in gaming on the web. The original 2D API was created within webkit by Apple who then provided it to the standards body with a royalty free patent licence. In February this year the Khronos Group issued version 1.0 of it’s WebGL API providing 3D rendering capabilities within browsers.

So what is a Canvas? A canvas is essentially a rectangular area on the screen that you can add and manipulate graphics. Simple? If only.  The basic action of drawing a line requires: creating a canvas, getting the canvas context, starting a path (beginPath()), defining a start point ((moveTo(x, y)), moving to the end of the line (lineTo( x, y )), closing the path to say we finished drawing our line (closepath()) and finally drawing the line (stroke()). If this sounds complex let me tell you that to do even this simple action previously involved some very imaginative code and image manipulation.

You can create simple or complex shapes using “paths“. Drawing a line following the path only occurs when you call stroke() . If the path create a shape it can also be “filled” using fill() . A fill can have colours and styles (e.g. a pattern, gradient or image).
With more curvy shapes you need to look to quadraticCurveTo(), bezierCurveTo(), arcTo() and arc() to create a path that curves.

Apart from drawing  and colouring (“filling”) images can be transformed: scaled (scale()), rotated (rotate())and skewed (transform ()).

Apart from shapes, of course you can draw and fill in text on the Canvas. And there are also API’s to create set the attributes of shadow’s:  shadowColor sets the color of the shadow, shadowOffsetX and shadowOffsetY positions the shadow from the original shape or text and shadowBlur allows you to blur the shadow.

There is so much more that can be said about Canvas that I almost didn’t bother with this simple overview for fear of not doing it any justice. However in the end I felt it needed a mention. The latest draft of the specification can be found here. Beyond this WebGL will provide a whole new set of more powerful capabilities however it is currently way behind the basic Canvas features in terms of browser support.

Further reading

HTML5 gets fun, without a plug-in in sight

June 16, 2011

I’ve still not finished covering all the new features of HTML5, but I do think it’s time for a bit of a break. One of the real measures of whether HTML5 will take off will be how well it will support the gaming industry, and indeed here some people have feared that it will not deliver and have continued to back plug-in based technologies like Flash, Java or Silverlight. Well after extensive research it’s time to dispel a few myths
Now it’s not true that there haven’t been some great HTML games already, remember Google’s re-incarnation of PacMan and recently Effect Game’s Crystal Galaxy which will work even in IE6 !

However a number of features like Canvas, HTML5 Audio and WebWorkers are changing people’s perception of what is possible on the web and all without plug-ins ! So here is my top 5.

In at number 5 is, well not a game, but nevertheless a nice use of the new canvas API’s, a remake of the popular windows desktop app, Paintbrush.

At number 4 is another remake of an old classic, Asteroids! Whilst not up to the standard of today’s modern graphics they are a vast improvement over the games original line art graphics, and offers smooth movement and responsive feedback.

Number 3 is Canvas Rider a simple yet strangely addictive game requiring skill and judgement to guide a motorcyclist across a number of different scenes.

Just missing the top spot is Torus a 3D cylindrical version of Tetris.

However in first place has to be Pixel Lab’s Agent 8 Ball, great graphics, fast smooth operation and sound make it hard to believe that this is a browser game without any plug-in support. In fact this video comparison of Flash vs HTML seems to have totally missed this great example too (see comparison of pool game 3mins in). There are many more great examples out there, even for those Silverlight enthusiasts Microsoft has assembled some great examples of HTML5 in action.

So what’s the future?  Well if Google’s demo last year of it’s web version of Quake is anything to go by things are certainly looking exciting ! The future is definitely not solo game play, as Game Closure showed last month when it demo’d a multiplay social game called Popstar Defense.

All the credit for this new world of possibility can’t just go to HTML5/Javascript as technologies because it is the tremendous improvements in Javascript engines by all the main stream browser providers that is giving the games a useful performance boost.
I’ll be covering some of the HTML5 features that enable these games such as Canvas and HTML5 Audio in future posts, enough research for now…  time to get back to work !

Make sure you use a current browser supporting HTML5 features like Canvas to view / play these.

HTML5 gets a database

June 9, 2011

As a relative late comer to HTML5 trying to catch up on a spec that spans over a 1000 pages is no mean feat, let alone the fact that the definition of what makes up HTML5 is covered across several specs (see previous blog on standards spaghetti). If you’ve been following this series then you’ll have worked out I have a few favourite features that I think will radically change the perception of web applications, and you guessed it HTML5’s support for database access is another.

The specification started out as early as 2006 with WebSimpleDB (aka WebSQL), and went as far as implementation into many browsers including webkit, Safari, Chrome and Firefox. From what I can find Oracle made the original proposal in 2009 and the W3C made a switch to Indexed DB sometime in 2010. Although already had their own implementation using SQL-Lite, they too preferred IndexedDB). The current status as of April 2011 of the IndexedDB spec is that it is still in draft, and according to early implementations exist in Chrome 11 and Firefox 4. Microsoft have released a prototype on their html labs site at to show their current support .

Clearly it is not ready for live commercial applications in the short term, but it is certainly something worth keeping your eye on and to plan for. When an application requires more than simple key value pairs or requires large amounts of data, IndexDB should be your choice over HTML 5’s WebStorage api’s (localStorage and sessionStorage).

The first important feature about IndexDB is that it is not a relational database but in fact an object store. Hence there are no tables, rows or columns and there is no SQL for querying the data. Instead data is stored as Javascript objects and navigated using cursors. The database can have indexes defined however.

Next there are two API modes of interaction, Asynchronous and Synchronous API’s. As you would imagine synchronous API’s DO block the calling thread (i.e each call waits for a response before returning control and data). Therefore it follows that the asynchronous API’s do NOT block the calling thread. When using asynchronous API’s a callback function is required to respond to the events fired by the database after an instruction has been completed.

Both approaches provide API’s for opening, closing and deleting a database. Databases are versioned, and each database can have one or more objectstores. There are CRUD API’s for datastore access (put, get, add, delete) as well as API’s to create and delete index’s.

Access to the datastore is enveloped in transactions, and a transaction can be used to access multiple data stores, as well as multiple actions on a datastore.

At a very high level, there you have it, IndexDB is a feature that allows you to manage data in the browser. This will not only be useful for online applications (e.g. a server based warehouse could export data cubes for local access) but also for offline applications to hold data until a connection can be established. I’d fully expect a slew of Javascript frameworks to add value ontop of what the standards provide, indeed persistence.js is one such example.

It’s good to see early implementations and prototypes for IndexDB and whilst the date for finalising this spec is unclear, I for one will be monitoring it’s progress closely and waiting with baited breath for it’s finalisation.

HTML5 gets cross with domains

June 2, 2011

In my last post I overviewed a number of new communications features in HTML5 that in my mind will no doubt transform web applications moving forward. One of those features was Cross Document Messaging which is one of the most exciting new features I’ve found in the specification.

One of the big constraints of web applications has been allowing separate applications to talk to each other. For example let’s say you have a phone book application and you have a news feed application. If you wanted to show news for a person you selected in your phone book you couldn’t get the phone book to tell the news application which person you had selected, you would have enter the person’s name in the news application and then search: a series of manual steps as automation wasn’t possible.

Along came portal technology, followed by portal standards (JSR168 then JSR286), which enabled applications to do exactly this, share data (of course they have many other features and benefits to). Whilst a portal page can consist of applications (portlets) running off different servers, the main constraint of them sharing data is that they have to be on the same portal page i.e. you couldn’t have two applications running in separate browser windows or tabs and sharing data or passing messages between them.

Cross Document Messaging overcomes this. Essentially an application can use PostMessage to send a message:

 my_iFrame.contentwindow.postmessage(‘Hi there’, ‘’);

NOTE: you can’t send message from a https to http (or vice versa) application.

 The targeted application must implement an event listener:

 window.addEventListner(“message”, msgHandler, true);

and obviously create the msgHandler function to process the message.

  function msgHandler (e) {…..handling code…..}

The receiving application will be notified of the senders web address (origin) and can therefore choose to ignore the message if it is coming from an unrecognised source. It is best practice for the receiving application to maintain a “white list” trusted origins and check these before processing messages.

Even with trusted origins messages coming in as strings need to be validated as they could contain script and open themselves up to an “inject attack”. This is where the string contains script rather than data, if the script is evaluated it essentially issues a set of commands to the receiving apps server.

The two applications can be in entirely separate browser windows, hence overcoming the constraint of a portlet approach.

The concept of Origins is used by other new features such as XMLHttpRequest. As per my last post previously this API was only able to talk it’s own origin. Now it can talk to other origins, essentially allowing for content to be aggregated in the client rather than just at the server as is the case today.

 This is a simple posting of a powerful capability, certainly an area web developers should consider delving deeper into.