Converting A Site To HTML 5

HTML 5

As you may notice, I’m using a new look here on GoodBlimey with a theme that now supports the modern HTML 5 markup language. What this means is that the site can now move forward with new techniques and be more visible with search engines and basically have etter use of semantics and markup to provide for a better website experience. It also means that rich content like audio and video can easily be added and controlled.

Speaking of adding video content, since previously I was using Flash Video (.flv & .f4v) for all my videos on this site and Mattplays.com, that means I’ll have to convert all of said videos to different formats to ensure that different browsers and mobile platforms can view them. Those formats are H.264 (.mp4), OGG Video (.ogv), and WebM (.webm). Each video has to be converted three times, and since I had well over a hundred videos to convert, it took days even on a fast processor that I’m on, which is an Intel i5-3750K processor overclocked from 3.4GHz to 4.3GHz.

Then all those converted videos, over three hundred of them, has to be uploaded to the server, which takes just as long.

Finally, the code of the site has to be updated to reflect the use of HTML 5 to harness the different formats to be used by different browsers and mobile platforms. There would also have to be code to identify what browser is being used, and serve up the right format that browser supports in order to play the video the visitor wants to watch. PHEW!

The tools that I’ve used to accomplished all these tasks are:

  • Any Video Converter – converts OGV and WebM (can also do MP4 but I prefer Handbrake)
  • Handbrake – converts to MP4
  • FileZilla – FTP client to upload videos to server
  • VideoJS – Javascript package that identifies the browser being used and serves up the correct format

One Response to “Converting A Site To HTML 5”

Add a Comment »

  1. It’s been awhile since I’ve seen a facelift for GB. Well done, Matt!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>