Simple QuickTime Movie Embedding

QuickTime has a very useful "Export for Web" feature that can produce a number of different versions of the same movie targeted at different devices. As well as the different versions of the exported movie it produces a web page with instructions and an example of how to embed the movie in your own website. This is a great but, as far as I am concerned, the way Apple have chosen to embed QuickTime movies in web pages has a number of drawbacks:

• The markup needed to embed a single movie is quite extensive, requiring a JavaScript function call and a noscript tag to manually embed a player when JavaScript is disabled.
  
• Their solution uses two rather large JavaScript files and a style sheet. These files are not ridiculously large but they seem very over engineered for solving what is in essence a very simple problem.
• The appearance of the embedded movie when JavaScript is disabled is different, most notably no clue is given that it is in fact a movie which can be played by clicking upon it.
• There is no simple way of customizing the way in which the movie is embedded in the web page.

So I've put together a solution which attempts to address all of these issues making it both easier to embed QuickTime movies into pages within your website as well as giving you more control over their appearance.

I've put together a demo page with a number of examples, but to give you an idea of what you can do, how about the option to watch the trailer for Fracture or WALL-E.

Updated 26/10/2008: I've added a check to see if QuickTime is installed so that we don't even try to embed it if it isn't there.

Updated 07/11/2008: I've removed code that worked around the Eolas patent as a) I don't think it is really needed and b) it was causing two instances of QuickTime to be embedded in IE which resulted in audio problems. Thanks to Jonathan for pointing out the IE problem.

Updated 27/11/2008: Added the ability to provide either a re-direct URL or a function to be called when the user clicks to play a movie if they don't have QuickTime installed.

Updated 30/11/2008: A very minor update to allow the URL of the QuickTime movie to contain parameters.

Updated 02/12/2008: Added the ability to place links to the QuickTime movies outside of the DIV in which they will be played. Thanks to Stephen for the suggestion.

Updated 14/10/2009: Updated the CSS styles to include the standard CCS3 opacity as new versions of Firefox no longer respect the -moz-opacity setting. Also the script now ensures that the DIV in which the movie will be played is fully within the viewable area by scrolling the page if necessary.

Updated 26/11/2010: Added support for showing alternative HTML content if QuickTime is not installed. Thanks to Niklas Olofsson for the suggestion.

if (window.opera && opera.wiiremote)

While my current readership maybe small (4 at last count) it is diverse. As such I'm sorry that some posts maybe of absolutely no interest to some. For example, today's post is probably relevant to only 1 of my readers!



Object detection is considered the best way of implementing cross browser JavaScript -- that is check to see which methods are available and then use the correct combination to achieve whatever it is you are trying to do.

Detecting the Opera web browser is easy as it's the only browser to implement the window.opera object. The Nintendo Wii console has an Opera web browser but until yesterday I had no idea how to recognise it as different to the PC version of Opera without looking at the user agent string, which can be easily spoofed.

It turns out, however, that Opera on the Wii has extra objects that allow access to details of the Wiimotes -- opera.wiiremote. So we can use this to detect when we are running JavaScript on the Wii by checking for window.opera && opera.wiiremote.

Of course we can do much more than just detect that we are running on the Wii. As far as I can tell the only thing that can't be detected are the values from the accelerometers. There are a number of demo pages as well as a simple game called Wii Roll that you can try.

Of course you can't develop web pages on the Wii so testing web pages will mean trekking backwards and forwards between your PC and the Wii. Of course someone else has already thought of this and developed a wiiremote emulator script so that you can develop and test on your PC.

CSS Selectors

When I first started to setup this blog I made a number of changes to the standard template I choose to use. One of the things I wanted to be able to do was add representative icons to links to show their file types. You may already have seen this in my post on the BBC iPlayer, but in case you missed it here is another link to the solution I provided in that posting. Now assuming that you are reading this in Internet Explorer 7, Firefox, Opera or Safari there should have been a little zip icon following that link. If your using some other browser here is what the link should look like in a screenshot of the link in the iPlayer post:
This is achieved using CSS attribute selectors. Basically I have a CSS rule that checks the destination of every link and if it ends in .zip then it adds the little icon. There are six easy to use CSS attribute selectors that allow you to match attributes in different ways: starts with, ends with, contains, is exactly equal to, has the attribute, match one item in a space separated list.

So that I don't have to pollute my main template file with lots of rules just to show an example of each I've put together a separate demo page. If you want more details than there are in the demo then take a look at the CSS3 Selectors specification, which defines these attribute selectors as well as a whole load of others.

If you intend to use any of these CSS rules it is worth remembering that to get them to work at all in Internet Explorer not only do you have to be using version 7 but you must ensure that your HTML page specifies the HTML 4.01 strict doctype, because in quirks mode IE totally ignores all these CSS rules.

Color Hunter

As anyone who knows me is probably aware when it comes to choosing color schemes, don't ask me! I really can't tell when two colors just really do not go together. This has of course resulted in some really bad websites in the past.

So I was trying to alter the template for this blog and was looking for some new colors. Now I'm still not happy with the layout and style but I did come across a really useful website -- Color Hunter.

Color Hunter produces color palettes from images. For example, give it a picture of a sunset and you will get five colors that are predominate in the picture which you can then use as a palette somewhere else knowing that in at least one other place they have been seen together. You can also search using a HTML color code to find palettes that include a given color.

If that was all the site did then it's use would of course be limited. It's one truly clever feature is to let you search by photo tags. So I wanted a color palette that had something to do with coffee, so I search for coffee and I'm now using the colors you see on this site from palette #49310.

I'm still not convinced by the color scheme I chose, but at least now I know where I'll be looking next time I need a color palette!