Inserting a Quicktime Player similar to apple.com

Question

Looking at Apple Website they do an outstanding job with the quicktime movies they show off to their users. When I've included quicktime links before, the player that actually shows to users is quite bland, and across browsers really differs from what it looks like in safari, chrome, ie, firefox. Apple seems to handle all these conditions quite well. Is there some kind of open source player that I can use (NOT FLASH) to accomplish the same thing they are doing? If apple is doing it, I would assume there is a way to duplicate this process, and I know with HTML 5 there are ways, but with html5 not fully supported yet, I was looking for something else that may be able to handle it currently..

Thank you in advance.

======= UPDATE SOLVED =========

I've solved this, after a while of working I found a little Gem on the apple site that was well hidden away. Using Apple Documentation - Found to the left of me, there is a ac_quicktime.js javascript file which swaps in an OGG File incase the browser does not support the nice looking Quicktime X player. Now OGG conversion took me a bit of time to do, but I was finally able to convert this in ffmpeg theora. Using this it worked perfect. Thanks for the suggestions everyone! Hope this helps someone else as I've already used it in a handful of different areas!

Other sites that helped with this process:

Dive into HTML5 - Video

Video for Everyone

Sublime Video

Lastly make sure your .htaccess file is able to serve up .ogv files otherwise this one could stump you for quite a while if you aren't reading carefully.

AddType video/ogg          .ogv
AddType application/ogg    .ogg

Answer 1

Apple.com relies on the client's QuickTime plugin.
They don't leverage a special version of the QT player, they build on top of (literally) the default player.
This is how they customize the look of the controller and it's unique functionality; making it similar across browsers.
It relies heavily on custom imagery and javascript. Check out the object's documentation, and even the source of the iPad video to see how they built the controller.

After some quick Googling, I couldn't find any sort of js library/plugin to ease the QT customization process. Anyone got one?

Answer 2

jQuery Tools - they have a media player called "flowplayer":

http://flowplayer.org/

Answer 3

After looking at the object/embed tag they use, it looks like there are some parameters that can help the look of the player.

After playing around with the true/false values here are a couple that might help you out:

showlogo
Shows a QuickTime logo before the video loads. You can set this to false to not have this show up.

controller
Shows the default QuickTime video controls. Set this to false to hide the default video controls. Definitely makes it look cleaner.

[Possibly more to come...]

Be sure to replace all the values in the object/embed tag in order to cover all browsers.

I have been messing around with the iPad video on jsbin.com.
Here is a page with the same values as Apple's site: http://jsbin.com/udupe3
Same page with the video controls set to on. Compare the code to see what I did: http://jsbin.com/udupe3/2

Answer 4

I see that you've found Apple's solution, but you may also want to take a look at SublimeVideo and Video for Everybody, which aim to create similarly nice and compatible players.