Quick Tip – Simple HTML5 Video

HTML5 is awesome. It extends the DOM to be ready for the future once broadband is wide enough to replace your old broadcast TV in full HD.

Video is obviously the most exciting element. Now you can directly interact with the video in the DOM which can mean you can make a fully, easily to update scripted site which does not rely on plugins.

There is a few things to note about HTML5 video:

  1. There is no standard video format so you will need to encode your videos using both MP4 and OGG Theora. Google has WebM which may become the standard. Use Handbrake to encode the MP4 version and ffmpegtotheora to encode the OGG. Google this, it will take you less then 5 minutes to encode your video in the formats.
  2. You will want to use a fall-back for older browsers. I like Flowplayer which is a Flash video player
  3. Progressively enhance your site. If you want to do some cool stuff with the video ensure that you still have a working site for those using a 9 years old browser.

If we want to have a video with is 843×480 which preloads, plays once it is buffered and contains controls we will use the below

<video width="843" height="480" preload autoplay controls>
 <source src="/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src="/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

That is exactly how simple HTML5 video can be. Of course you may want to add poster or change the settings.

Since we want fallback for IE we will use Flowplayer by embedding it after the other sources. This is a cool thing about the element is that it has fallback.

<video width="843" height="480" preload autoplay controls>
 <source src="/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src="/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
 
</video>

If you want a real in depth look at HTML5 video I recommend you read:

Challenges to create an ecommerce solution

A new doll in my collection

When designing an ecommerce solution there is many challenges which the developer needs to take into consideration to save time and frustration for both them and the client. Good planning and asking the right questions up-front will help in over coming the challenges. Below is a list of some of the challenges faced in creating an ecommerce solution and some basic questions that should be asked to minimise the challenges.

Ecommerce is focused on workflow compared to website design which is focused on content and layout. When designing an ecommerce solution the most important part is to understand the workflow. This involves working through each of the stages of the process the solution is meant to solve. While there may be existing processes, the online tool should be about refining those processes instead of just creating an online version of the offline solution. The first questions that should be asked are:
Photo by Joel Mark Witt
Continue reading

Create My – New Site

Create My has a new look and feel to replace the old look. Going off the fact you are already at the site you probably are already aware of the big change in the look. The changes reflected the need to look fresh. The new setup is more flexible any will allow longer term small changes to be made.

The new look sports some great technology inclusions and more are in the works.
Continue reading