House of Laudanum » Search Results » Grandiflora http://houseoflaudanum.com Bespoke solutions for creative people, Sydney Australia +61 412 116121 Wed, 08 Sep 2010 05:13:24 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 HTML5 video – no webm. http://houseoflaudanum.com/navigate/howtos/html5-video-no-webm/ http://houseoflaudanum.com/navigate/howtos/html5-video-no-webm/#comments Mon, 12 Jul 2010 12:48:40 +0000 mr.snow http://houseoflaudanum.com/?p=723 Quick recipe for HTML5 video with Flash fallback. Used here.

  1. Download (and fix) HTML5media
  2. Your <head> will need flowplayer.js and html5media.js. Keep flowplayer.swf in the same directory.
  3. Convert source videos to h264/mp4 and ogg. See ffmpeg switches below.
  4. Add <video> tag. Add two <source> lines and an optional <poster> line. See below.

Once installed correctly, h264 will play in Chrome, Safari, Mobile Safari (iPad). Ogg will play in Firefox. Flash will play the H264 on Explorer (and Firefox if you don’t provide an ogg version).

Here are the ffmpeg switches for compressing these files. I’ve installed ffmpeg from Debian multimedia. These files are square pixel and square format. You can also check the input format by just calling ffmpeg -i INPUT.mp4. That might give you an idea of what -b (bitrate) and -bt (bitrate for libx264) should be like.

ffmpeg

rossetti@Wakatipu:~$ ffmpeg -version
FFmpeg version SVN-r13582, Copyright (c) 2000-2008 Fabrice Bellard, et al.

rossetti@Wakatipu:~$ ffmpeg -i flower3_15_2.mp4 -cropright 210 -cropleft 210 -aspect 1 -s 544x544 -vcodec libx264 -r 25 -b 516k -bt 516k -crf 22 flower3_15_2-crop.mp4

rossetti@Wakatipu:~$ ffmpeg -i flower3_15_2.mp4 -cropright 210 -cropleft 210 -aspect 1 -s 544x544 -r 25 -b 516k flower3_15_2-crop.ogg

HTML5

This code hides the builtin controller. You can easily control it from javascript however. This one will preload anyway (it will start buffering even if paused) and autoplay. The contents of the <video> tag is parsed by the browser looking for a file it can play. Firefox will stop parsing at ogg and play. Internet Explorer (without the html5media javascript library) will only see the <img> tag. If you’re not autoplaying, <poster> will show before play.

One thing to watch is that <video> may not respect the width/height attributes that you specify.

<video width='540' height='540' autoplay='true' style='border : none;'>
<source src='/sites/all/themes/grandiflora/libs/flower3_15_2-crop.mp4' autoplay preload type='video/mp4'>
<source src='/sites/all/themes/grandiflora/libs/flower3_15_2-crop.ogg' autoplay preload type='video/ogg'>
<poster src='/sites/all/themes/grandiflora/libs/magnolia-still.jpg' width='540' height='540' />
<img alt='Grandiflora of Sydney delivers roses and beautiful native and seasonal flowers and specialises in bridal flowers, weddings and events.' src='/sites/all/themes/grandiflora/libs/magnolia-still.jpg' width='540' height='540' />
</video>

HTML5media

The fix I mention is in the regular expression that detects compatibility. It fails (for me) in Firefox on mp4s. Here’s a patch.

// Extracts the mimetype from a format string.
function getMimeType(format) {
- return format.match(/\s*([\w-]+\/[\w-]+);|\s/)[1];
+ if ( format.match(/\s*([\w-]+\/[\w-]+)|\s/)[1] )
+ return format.match(/\s*([\w-]+\/[\w-]+)/)[1];
+ else
+// this fails if you pass in a raw mimetype ( ie firefox passing in type="video/mp4"
+ return format.match(/\s*([\w-]+\/[\w-]+);|\s/)[1];
}

]]> http://houseoflaudanum.com/navigate/howtos/html5-video-no-webm/feed/ 0 Grandiflora http://houseoflaudanum.com/work/grandiflora/ http://houseoflaudanum.com/work/grandiflora/#comments Thu, 08 Jul 2010 05:01:46 +0000 mr.snow http://houseoflaudanum.com/?p=698
  • Client : grandiflora / Saskia Havekes
  • Job type : Website, mailing lists, and other marketing strategies.
  • Year : 2002. Redesign & new back end 2010.
  • Designer : Yolande Gray
  • Link : grandiflora.net

    • For Sydney florist grandiflora’s recent redevelopment we’ve built a gorgeously designed Drupal theme incorporating custom Drupal & Ubercart modules. The site is lavishly illustrated with photographs by Gary Heery, designed by the lovely Yolande Gray with a timelapse of a magnolia opening by Ian Hobbs. Needless to say Saskia and all the flowers are loving the new site!

    Store keepers can now sell seasonal flowers that are on the floor today. With a couple of clicks roses are out and tulips are in. Photos from the morning markets go up straight away to Twitter where they are syndicated to the grandiflora blog. Customers can log in to the site and create reminders for their future special events – never forget another anniversary! Still underway are a social style guide to help the staff communicate their brand effectively and an upgrade to their electronic profile including forthcoming EDMs.

    ]]>     http://houseoflaudanum.com/work/grandiflora/feed/ 0