The ability to embed video directly into an HTML5 page is pretty awesome. As a first class citizen in the HTML5 enabled browser, video is no longer an ‘outsider’ and so you can actually do some relatively cool things without any particular effort. Below, I examine five common things that you’d previously have had to solve with a reasonable degree of complexity.

#1 Specifying multiple file formats

Let’s take a sample player:

<video width="320" height="240" controls="controls">
<source src="video.ogg" type="video/ogg" />
Sorry, your browser does not support the video tag.
</video>

This works great, but only if the client can play Ogg video. If you have multiple formats of the same media, you can offer them up to the HTML5 video player as well and it will pick the first one which the client can play. It’s a little bit of magic, really:

<video width="320" height="240" controls="controls">
<source src="video.ogg" type="video/ogg" media="screen" />
<source src="video.mp4" type="video/mp4" media="screen" />
<source src="video.webm" type="video/webm" media="screen" />
Sorry, your browser does not support the video tag.
</video>

Pretty neat, don’t you think? Now, rather than giving up when the .ogg video cannot be played, the player will check to see if .mp4 or .webm videos can first be played, too.

#2 Specifying differently encoded media for different devices

So we’ve got our multiple-format player. But can we extend this further so that we can choose different video based on the capabilities of the particular client making the request? The answer is Yes.

Let’s assume we have ‘movie-hi.ogg’ and ‘movie-lo.ogg’ – both are essentially the same video but one is optimised for small screen and the other is optimised for a full HD experience. We can have the HTML5 video player figure out which one to load using source media attributes:

<video width="320" height="240" controls="controls">
<source src="movie-lo.ogg" type="video/ogg" media="screen and (min-width:320px)" />
<source src="movie-hi.ogg" type="video/mp4" media="screen and (min-width:720px)" />
Sorry, your browser does not support the video tag.
</video>

Let’s take a closer look at the media attribute. The screen keyword tells the HTMl5 video player we’re targeting computer screens, rather than say braille which would target braille feedback devices.  Next, we’ve got the boolean operator and which connects the statement on the left with the statement on the right, so that if both conditions are true the statement is satisfied and that will be the source element we use (you could replace and with not or a comma – which signifies the ‘or’ operator). Finally, we have the min-width selector, which could just as easily be max-width or min-height, for example. [There's a big list of all the currently supported filter values over at w3schools).

#3 Making pages with video load faster

The HTMl5 video tag will attempt to pre-load the contents of the video element on page load by default. You can change this behaviour so that is loaded on-demand, by adding the preload attribute with the value none to the video element:

<video width="320" height="240" controls="controls" preload="none">
<source src="movie-lo.ogg" type="video/ogg" media="screen and (min-width:320px)" />
Sorry, your browser does not support the video tag.
</video>

#4 Using an image as a placeholder for video while it is loading

Using a single frame from somewhere within the video can be a nice way to give a user a hint of what the video contains. It’s also a great way to fill the video container with something relevant while the video is still loading in the background. Fortunately, this is nice and easy to do. Just add the poster attribute to the video element:

<video width="320" height="240" controls="controls" poster="image.jpg">
<source src="movie-lo.ogg" type="video/ogg" media="screen and (min-width:320px)" />
Your browser does not support the video tag.
</video>

#5 Execute custom javascript code triggered by video player events

As a first-class citizen in HTML5, the video element has a full-featured javascript event model that you can hook into in order to execute your own custom code. Here are a selection of my favourites:

  • oncanplay – fires whenever the media can start to play
  • onended – fires when the media has reached the end
  • onprogress – fires whenever the browser requests media from the server
Using these events, it is possible to hook into the video element to create a very rich, interactive UI that extends out of the video frame itself. This very extensible model gives you a lot of freedom to create!

A long, long time ago, in a blog post far, far away, I documented some of my home tech in a piece that described how it all connected together. The article actually focused on my home network equipment, but I figured it would be useful to document the rest of the kit so that I can look back on it in a few years and marvel at how outdated it all was.

In a move which is hopefully slightly more interesting than my outrageously poor opening line, I figured it would be fun to expand out and showcase how I actually use some of this technology in my day job and my home life because I enjoy reading about the interesting things others have done, so perhaps others out there will appreciate this!

Highlights

Before I can kick-off any mini series style articles, let’s set the foundations:

  • Gigabit Ethernet cabled throughout
  • Netgear GS605 Gigabit Switch
  • Connectix Home Network Cabinet
  • Connectix Home Network Patch Panel (8 RJ45 + 4 telecoms)
  • HP ProLiant N36L MicroServer (4TB storage)

Infrastructure

Our apartment is cabled using gigabit ethernet, with at least two outlets in each bedroom plus four in my home office, and four in the living room behind the TV. This all terminates back to a Conectix Home Network Patch Panel which provides 8 termination points for each of the sockets, plus 4 telecoms connections which can be used to route the BT line to any of the RJ45 outlets scattered around. The network sockets all terminate back to a Netgear GS605 Unmanaged Gigabit Ethernet Switch, which sits inside my Connectix Home Network Cabinet.

I really like having the flexibility to swap-out any active hardware or install new stuff without any hassle, plus having the freedom to route connectivity about as I need it is pretty neat.

Network Cabinet Setup

Energy Metering

Within the network cabinet is a Current Cost Envi and Current Cost Bridge, although I have to say that I am not overly impressed with the bridge’s capabilities since it connects only to the my.currentcost.com web site, which although powered by Pachube, locks all your data away.

In the coming months, I will hopefully be announcing my revised ‘Arduinometer’ project, which is now based on the new Netduino Plus. This open-source platform will be capable of reading simultaneously from different energy meters, including gas, electricity and water.

Connectivity

Right now, I’m using BT as my broadband provider. Until their Infinity service is available in my area (September 2011 is the ETA – yikes!), I’m using their Total Broadband package. As you can see, I get relatively decent connectivity, but I’d obviously like to improve on that and I have high hopes for the BT Infinity Service (when it becomes available):

What matters most to me is reliability: as I work from home, I need a robust connection that’s there when I need it.

Servers & Storage

At the heart of my home network is a new HP ProLiant MicroServer N36L with 4TB of storage capacity. It runs the newest Windows Home Server 2011 operating system. All my client PCs (including my main development station) are backed-up daily by the server. That makes for a total of 4 PCs and 1 laptop being regularly backed up by the server, quietly and transparently.

As an added bonus, after a clean build of my development station, I took a full backup of it and that should allow me to do a complete rebuild simply by restoring the backup (which is actually an image of my machine) to go back to my ‘ideal state’ at any point in time.

Development rig

My main development machine is an Intel Core i7 870 @ 2.93GHz. It has 8GB of Corsair DDR3 RAM and runs Windows 7 Ultimate. I’ve fitted out the very lovely  Antec P90 case with a Corsair sealed liquid-cooling unit for keeping the processor nice and cool. Having a nice big radiator and 12cm fan means the RPMs can be kept low and that in turn reduces noise from the case.

Storage wise, I’m running a 120GB OCZ Colossus SSD as my primary drive with a 600GB Western Digital Green Caviar for storing most of the data. I also have a secondary 60GB Corsair SSD which has holds code I’m working on with Visual Studio 2010 (which, by the way, is installed on my primary SSD).

Driven by the NVidia GeForce GTX 275 primary graphics card are two 24″ LCD monitors, but I have aspirations to update those this year to a couple of IIyama 27″ panels. I also have a cheaper standard graphics card driving a 3rd 21″ CTX LCD monitor on which Twitter sits (yes, it is an addiction – live with it).

Back in January this year, I wrote a neat little utility library for sending template emails. Tonight, it caught the attention of fellow developer Benjamin Howarth, famous for (among other things) his Umbraco mastery.

After a quick discussion, Ben decided to join me in maintaining the library and christened his membership in the project by adding a new ‘load from URL’ feature. And, a short while later, a package was available on Nuget. Not bad for around an hour’s work I thought!

To download and install the package easily via Nuget, bring up the Package Manager window within Visual Studio and type:

I created the initial version of the library with simplicity in mind: it’s not fancy, or complex. It was designed purely to provide a solution to developers who have to send templated emails in their projects.

Perhaps my favourite ‘feature’ of this library though isn’t really a feature at all, so much as it is actually a by-product of the way it has been designed: because it picks up template files from disk (or from a remote URL), you can easily allow your end-users to modify their own templates using your favourite rich-text editor. Pretty neat.

Please feed back!

I think it would be cool if we could get a little community of users together who could help drive the project forward with further suggestions. Head on over to the project hub at Codeplex to get involved, or download the latest version. And, if you decide to use the library, please, please, please – do rate it on Codeplex and/or drop me a note to let me know how you’re using it. It’s not a requirement, of course, but since we do this stuff for free in our spare time, we love to read feedback.

Thanks!

Yesterday, after spending a few hours researching, I made a little bit of an impulse decision and purchased a Samsung Navibot SR855 (a robotic vacuum cleaner). I figured that since I don’t like hoovering (and neither does my girlfriend), this could be the ‘ultimate’ gadget purchase that both of us can enjoy. Needless to say, at £338, my girlfriend wasn’t particularly impressed when I first broke the news.

Navibot's self-charging dock

“But we need one, darling!”

Naturally, the first thing you have to do after any impulse purchase is convince other people that you had a good reason for doing so, and that what you’ve bought will actually be suitable. At least, someone with my reputation for buying just about anything that has a plug on it has to anyway!

Hoovering isn’t a particularly fun chore, and with two cats and hardwood flooring everywhere, this is a task we have to repeat fairly often. The Samsung Navibot SR8855 comes with an on-board scheduling feature which means you can program it to wake up daily and go to work. Potentially, this could save us 20 minutes per day and over a full week, that’s over two hours - a full five days a year!

So, does it work?

Having just spent the morning assembling IKEA flat-pack furniture, the floors were covered with sawdust and other general packaging mess. Plus, a few days’ worth of cat fluff. It was time to put the Navibot to work.

After charging for 90 minutes (the unit is supplied at an almost empty charge), you simply press the “auto” button on the Navibot and it undocks itself and starts mapping your room. I chose the Navibot, rather than it’s main competitor the ‘Roomba’ from iRobot, because it appears to follow a much more logical pattern when cleaning your rooms than the Roomba does, which seems to do most of its navigation by bumping into things.

The Navibot has an upward-facing cameara which continuously takes pictures of your ceiling to determine the layout of your room, in connection with some distance ranging and kinetic sensors mounted on the first 180 degrees of the unit.

In just a minute or two it appeared to have figured out exactly where it was, and started linearly moving backward and forward around the room picking up cat fluff and sawdust neatly over every section it covered.

Carpets

As I mentioned above, we don’t have carpet, and I imagine the Navibot wouldn’t perform very well at all on those. Being very quiet, it clearly doesn’t have a lot of power and relies mainly on the two counter-rotating triple-brush ‘arms’ at the front of the unit to guide surface dust and fluff into the main brushes at the rear of the unit, rather than using vast amounts of suction.

In our front room, however, there is a fairly thick rug. It seems to navigate over it just fine initially, but it is a bit too thick for the unit to comfortably turn and it makes all manner of struggling sounds as it tries to desperately back away to firmer ground.

My verdict would be to avoid this if you have a carpeted house as it’ll only really pick up loose surface fluff and small debris. If you have hard flooring though, this thing is awesome!

Results

It cleaned our entire apartment, minus bathrooms, in approximately 20 minutes. The dust container was pretty full of all the usual things, indicating that it’d done quite a good job. In ‘auto’ mode, Navibot is apparently ‘afraid’ of walls, so it leaves about a 5cm margin around each wall where it doesn’t clean very effectively, relying instead on the exterior brushes to try to reach corner dust. It does, however, have an ‘edge’ mode, which you can run a few times per week if you want.

I suspect with a few uses it will get slightly more efficient at navigation, particularly since I couldn’t help myself from tinkering with its ‘manual mode’ occasionally, which lets you take control using the remote.

Once in manual mode, however, the unit stops remembering the route back to the charging dock, so you have to manually steer it back (if you ask it to return to dock on its own, it will fail miserably). On full auto though, it navigates back just fine.

Overall, I am pleased to say that this is one household gadget I’ve purchased that is actually pretty good at its job. Plus, my better half is also happy with the purchase, too – so it’s win/win. Having been programmed to wake up every morning at 6am and go to work, by the end of the week we should still have a cat-fluff and dust free floor area throughout our apartment. And neither of us will have lifted a finger.

~

No doubt I’ll be tweeting updates on the #navibot so follow me for the latest!

Follow

Get every new post delivered to your Inbox.

Join 261 other followers