Tomorrow I will be at Microsoft London to make IE10 support classList speak at news:rewired – media in motion on the topic of open web video and what you can do with it. For this, I got 10 minutes and then answer questions (or ask them) in a panel.

Update: The audio is now available on archive.org:

The slides – for what they are worth – are on Slideshare:

Web enabled video

And here are the notes used in the slides and the story I will tell to the audience with all the links for you to try out:

Web enabled video

Today I have a few minutes to talk to you about online video and why it is an amazing opportunity for journalists.

Video is engaging…

There is no doubt that video is an incredibly engaging format for information, news, entertainment – well, for anything really. A video can much easier explain a complex topic than text could as people can see and repeat what you do. You can show instead of just telling or hoping people read what you painstakingly wrote.

Video is also hard to edit and change

One of the issues with video is that it is much harder to maintain than a text. Editing a video requires more technical expert skill and takes longer than writing a text or changing something in an article. Say you got a number wrong – in a blog post that can be easily remedied. In a video it means a re-edit, in the worst case a re-shoot. In the case of the web it also means re-encoding the video in a format fit for consumption on the web and re-uploading it to the servers where it needs to go.

Video is also a black hole on the web

The other big thing is that whilst your videos are engaging and amazing – for search robots on the web they are actually nothing at all. Video content is not indexed and the information in it doesn’t allow people to find it.

So what can be done about that?

It seems pretty old-school that we still live in a time where videos have to be produced as a fixed package, with names, labels, map overlays, other videos and imagery and extras inside the video. This does not only mean that these things can not be updated, but it also means in a lot of cases when it comes to online video that their quality is impeded by the overall quality of the video.

Separation makes things easier to maintain

On the web we long understood that by separating concerns from each other, we can deliver much better results. How things look is defined and maintained somewhere else than what they are. A text is written without any design to it, the design is defined in the site template or in the overall look and feel of your product. This makes it easy to re-use the text in several places and formats – covering mobile and desktop needs or even as a news subscription in a feed.

Separation allows anyone to enhance

OK this is going into “data hippy territory” but if you separate your content and make your video available, then anyone can help improve the quality of it and provide for example translations of the captions. For this, there is a simple interface called universal subtitles available.

Separation increases accessibility and find-ability

Subtitles and captions are a great example to make video content more available to people. Not only the hard of hearing but anyone. You can for example follow a debate in the gym or in the pub without needing to hear it. The other big thing about it is that a transcript of a video makes it searchable by Google and Bing. And – if it is timed it allows people to to jump to a certain section of a video instantly.

HTML5 video allows for all of that!

HTML5 video is a step forward in interactive video on the web. Its openness allows us to innovate with it and weave video content into the web much like we did with text and images in the past. No need to have a plugin, no need to pay licenses for offering your video in a fast loading and high quality format on the web. By using open formats you can make your videos part of the massive interlinked thing we called the WWW in no time.

Just another page element

In HTML5, multimedia is just another page element I can add into my design. You can make it interactive in parts, you can show only parts of it, you can rotate and style it any way you want. For example I always hated the second sun in Star Wars to show us that Tatooine is not on earth. In this demo I can now drag the sun away.

The timestamp is the glue

The main trick is that I have full control over the video in HTML5 and I can react differently according to the time the video is playing right now. I have many other things I can monitor and react to, showcased here and using HTML5 canvas I can even change the video itself while it is playing.

Tapping into the real-time web

All this allows us to have a video and get information from the web to mix with it. Realtime updates from Twitter, other videos, photos and comments from other sources – all of these can be used easily as we are using video with the web rather than putting already done video on the web for consumption. The 18 days in egypt interactive demo shows for example how you can add all kind of – at that time – real-time web information to the the January 28th speech by Hosni Mubarak.

Lean back, relax, grab some popcorn

And the good news is that Mozilla – the non-for profit for the betterment of the web – is making it easy for you to do that with our Popcorn project. Popcorn is a JavaScript library and tool to add web content to videos and re-distribute the final product on the web.

Some quick demos

Some very cool things have been built with popcorn already:

• One millionth tower is a unique multi-project documentary from the National Film Board of Canada exploring “vertical living” around the world.
• History in these streets is a audio documentary about the history of the Black Panther party enhanced with Google Maps, images and other multimedia
• Buffy slays Twilight is a mashup of “Buffy the vampire slayer” and “Twilight” with information in Pop Up Video style.

Popcorn and its maker

We now need you to help us on our quest to make it easier for people like you to embrace the interactivity of online video. For this, we created popcorn.js as explained earlier, but we also made a tool that allows you to create videos in an interface. It is called popcorn maker, and we want you to kick its tires and tell us what is missing and what could be done better.

As part of the “Creating thumbnails with drag and drop and HTML5 canvas” post on MDN today, I spent some time creating a short and working resizing function that takes an arbitrary image and re-sizes it to fit into a thumbnail of a certain width and height. After a few failed attempts I googled around and actually found one of my old PHP/GD tutorials I thought I had deleted years ago. Well, the function still works :)

Without further ado, here is the resize() function (also available as a gist).

function resize( imagewidth, imageheight, thumbwidth, thumbheight ) {
    var w = 0, h = 0, x = 0, y = 0,
        widthratio  = imagewidth / thumbwidth,
        heightratio = imageheight / thumbheight,
        maxratio    = Math.max( widthratio, heightratio );
    if ( maxratio > 1 ) {
        w = imagewidth / maxratio;
        h = imageheight / maxratio;
    } else {
        w = imagewidth;
        h = imageheight;
    }
    x = ( thumbwidth - w ) / 2;
    y = ( thumbheight - h ) / 2;
    return { w:w, h:h, x:x, y:y };
  };

The returned data is the width and the height of the image and the x and y position in the thumbnail – ready to use in HTML5 canvas.

You can test the function in this Fiddle:

Things that made me happy this morning:

• Morning Star is a monophonic bassline synthesizer controlled by a step sequencer, designed to run on Web browsers and made entirely with HTML5 and Javascript
• Girls in a Tech World is a promotional video about women in tech – interviews with engineers
• Vanilla JavaScript FTW is a side-by-side solution comparison for common jQuery tasks
• Remote Tilt is an awesome device motion testing tool by Remy Sharp
• 5 year old kid gives feedback on brand logos – cheetah cheetah cheetah!
• Pixie Engine is a game engine in HTML5 to build your own games – press space to deploy kitten
• CSS3 for the real world – amazing examples like Word Art and Blink
• At Twitter, The Future is You! – amazing recruitment video that is a spoof of hiring videos
• T-Rex trying – the adventures of a T-Rex trying (and mostly failing) at doing things
• Let’s make some great art – cool book for kids

TD;TR: Converting games to HTML5 is hurting the cause. We need more games written in web technologies.

OK, I might be a bit late to the party but the latest “web version” of Angry Birds, “subtly” advertising this time not itself but Wonderful Pistachios was the talk of the day on some of my mailing lists.

The main thing was that it requires Chrome to run. This is nothing new, but I really enjoyed the ingenious way of testing for Chrome in the first place:

if (Modernizr.testProp('-webkit-box-shadow')) {

So the CSS box shadow (which will soon be deprecated with the vendor prefix in Chrome) is the main identifier. Not bad. So let’s hack around the detection with:

var l = document.createElement('link');l.rel = 'stylesheet';
l.href = 'http://wac.5DC0.edgecastcdn.net/805DC0/site/static/css/style.css';
document.getElementsByTagName('head')[0].appendChild(l);
GetCrackin.init();

Which leads us to a JSP file that detects on the server side and writes out a lot of inline webkit only code OK, never mind.

I am less annoyed that this is Chrome only. It was never claimed that this game runs everywhere (other than the Angry Birds released on Google IO). I am more annoyed about the bad performance the game has in Chrome and Safari on this Macbook Air. And I know the reason for this: conversion instead of dedicated development.

A look back in time – games on Commodore 64

As I have mentioned before, I used to work on some games on Commodore 64. In its heyday there was no way to have a game without writing it by hand – in assembly language and knowing what all the chips do. Perusing the memory map and the ROM allocations was part of the game of writing one.

When computers got more ubiquitous and better in terms of sound and graphics a lot of companies started building games on the other machines first – Amiga mostly. And to make extra money and sell even more copies, they also made C64 versions as conversions afterwards. These were most of the time shoddy at best and weren’t tested much. The C64 was the machine that is not where the money was made – the new hardware was the one to support.

The thing that got lost – and later on even more so – was the tinkering with the hardware and finding tricks to work around limitations. Out of the box the C64 had 8 sprites and a resolution of 160×200 pixels in 16 colours or 320×200 in 2 colours per 8×8 pixels. Using interrupts (executing code whilst the screen was painted by the TV or monitor) people came up with multiplexers that allowed for hundreds of sprites. With overlaying techniques we produced 256 colors at a interlaced 640 pixel resolution and so on.

A few of those tricks made it into the conversion tools from the “higher” computers to C64 code, but most were deemed too costly and time consuming and didn’t make sense to do any longer.

HTML5 gaming without the web stack?

This is happening now with “HTML5” games, too. Angry Birds is done with Google Web Toolkit, converted from Java I presume. It is made to work quickly and not show off what a web game can do, but instead how easy it can be to convert a game from Java to the “web”. And when that fails to bring the results it should, then we limit the web to one browser. And even fail at that as Angry Birds – in this case created to promote Chrome as a HTML5/games platform – doesn’t work on my Chrome book – the hardware dedicated to the browser.

Seeing this makes me frustrated, and it causes a lot of sniggering up to outright laughter from the Flash community. And they have all the right to. Flash games perform well, and showed that they can be easily changed and rebranded and extended when you build them the right way.

The HTML5 game engine vanishing act

Of course there are great minds on the case already and a lot of people build great demos and JavaScript frameworks to build HTML5 games in the technology rather than converting to it. The interesting thing about that is that every games engine released open source very quickly gets bought and un-opensourced and then vanishes from sight. The optimist in me thinks that this means there is great stuff afoot. The cynic in me sees the talent behind and the engines rotting away in a corporate environment as they were seen as a threat instead of an opportunity.

What HTML5 gaming needs to impress

I would love to see more real web games. Built in open technologies, with source available (or not, this is a nice to have) and really using the web. A web version of Angry Birds to me wouldn’t have a very long loader and ask me to sign in to Google to use it. It would be snappy and load the levels on demand, storing the ones I played and the next one locally in my browser while I am playing the current one. It would also allow me to build my own levels and share them on Twitter to see if I can build awesome stuff in the game that other people enjoy. All of this would be a total pain to make work on a mobile and a 3G connection, but is very much fine in a browser on a laptop with a good connection.

In other words, HTML5 games should be fit for the environment and use it to its strengths.

What about WebGL?

WebGL is an awesome opportunity for game developers to get into web gaming without needing to learn a new skillset. It is pretty obvious that an openGL developer could take it up much easier than a web developer would. Right now, WebGL is great for demos, but we have the issue of hardware access. If the biggest sound of the game is the fan of your processor and video card then this diminishes the experience. I for one never started gaming on PC as every new game coming out told me I need to buy new hardware in order to play it. This is not what I could afford. And this is not what we should force onto people on the web. A web app saying I need a certain browser or that my video card is not good enough to use it is not much better than the old “best viewed in IE4 with 800×600 pixels”.

We should think less World Of Warcraft and more Doodle Jump when it comes to HTML5 gaming.

Maybe I am a dreamer, and this is so not how the games market works. That is fine, though. A new market could emerge that takes the best of offline gaming and online experiences. But, we need to make that happen.

Having pestered someone working on a large healthcare web site in the UK to release some of their browser statistics I got a tweet today that they released an infographic (available here as a PDF). The site has had over 2 million visitors in 2011 and here is what they looked for:

Most went to the homepage and then to services. A big part was search and services offered.

In terms of devices used to read the site the web is not really as mobile as we make it out to be:

Windows rules supreme, followed by Mac, iOS, Android and Blackberry. I was surprised at the low number of Blackberry actually. It would also be interesting to see just how many services like meeting times are done via text message.

The browser share was the real blow here:

Internet Explorer accounts for 55% of the numbers, with Safari at 16% and Firefox at 14% following after quite a gap. Chrome clocks in at 11% and others with 4%.

When it comes to the version the IEs used, the numbers are interesting:

With 47% IE8 is the most used browser, followed by IE7 with 24% and IE6 with 19%. IE9 only accounts for 10%.

Of course these are not stats of a common web site, but it shows a few things to me:

• Web sites that people really need to go to would be wise not to block out older browsers
• The large numbers of IE8 and Safari shows us that browsers that come with the OS are the weapon of choice
• IE8 will be a problem to face for a few years to come

I love that the St. George’s trust made these insights available, and I’d love to see much more of these being released. Browser data from counter companies is to me just a very small percentage of the market of sites that provide services to people out there.