Sunday, October 21, 2012

HTML5 and LDV Camper Van website

I watched an old video recently about HTML5, a presentation by Scott Davis posted on InfoQ, this inspired me to update our LDV campervan website.

When I redesigned the website a few months back I used HTML5 semantics  but the site never quite worked on Internet Explorer and at the time I didn't know how to get HTML5 video working - I had a few renderings on Flickr but didn't want to embed them using Flash.

I updated the XSLT and DTD to support the video tag with multiple video codecs and added a script to convert MP4 videos into Ogg Theora for Firefox support.

ffmpeg -i ${filename} -b 500k -minrate 500k -acodec libvorbis -vcodec libtheora ${output}

The bitrate varies depending on the size of the video and desired quality.

So I added my 3 renderings in both h264 (converted using Handbrake on Mac) and Ogg video to the website planning page. I also cleaned up the CSS stylesheet a little and styled the video similar to the photos elsewhere on the site.

I also decided to add a new "Where we've been" section using a google map and an iframe, again styled similar to the other photos and videos.

The XSLT used to generate the whole website no longer generates div elements if they do not contain anything (i.e. no images or videos) cleaning up the final markup.

I'll update the webpage building package (http://blog.bjw.me.uk/2012/09/website-building.html) I blogged about earlier to support the two new tags (video and map), the updated IE support and cleaner XSLT and CSS.

In the meantime here's the new LDV Camper van conversion planning page and here is where we've holidayed in our LDV.

No comments: