As a HUGE David Bowie fan, I like to celebrate his birthday (he was 65 yesterday) with lots of Bowie videos and music. I like to share the videos with friends using Apples Darwin streaming server to create a live streaming playlist..Each year I do this I forget how to correctly embed the Quicktime video in html. So after searching around a lot for the best multi browser compatible way to do this here is the correct way to embed Quicktime video into your web site.
First, the reference movie file. If you use Quicktime Pro you can get the software to generate a reference file when you encode your movies for the web. The reference file has a .mov file extension but is not a media file instead it passes information to Quicktime to help it determine the best media to play for the client, i.e. low bandwidth version, iPhone version etc. In my case I am streaming all my media through a Darwin Streaming Server using RTSP and will create a reference file that points to the videos on my Darwin server.
The media reference file is accessed from Quicktime via HTTP so needs to be saved on in a publicly accessible area of your site.
In my example I am going to embed Bowies Lets Dance video. The video is saved in my Darwin media folder /home/media/video and is called davidbowie-lets-dance.mp4.
In my website folder I create a reference file called davidbowie-lets-dance.mov and paste the following text into it.
We need a “poster” image to represent the video, this will be shown on the embed page before the video plays, so we simply take a frame from the video and save it in a publicly accessible folder, in this example its called davidbowie-lets-dance.png
And now for the embed code which should go between the body tags of your html
This code should work across all browsers and will embed the video using the poster image as a link as show below.
Notice that the embed code points to the reference .mov file with an http link, the reference file then redirects Quicktime to the correct RTSP link for the video.
If you want to serve up a lot of videos in this way, you can create the reference file on the fly with PHP as I have done with this example – click the photo above to goto a demo page. The video information, name, title, size etc. are all stored in a database, the PHP script pulls out the video info from the database and creates the reference files and html on the fly.
As a side note, I was unable to compile Darwin from source under the latest version of Ubuntu Server 11.10, I had to use previously compiled files from another Ubuntu server running Ubuntu 8.x for the install.
I am still looking at perfecting the MP4 encoding for Darwin streaming, so more on that another time and Happy Birthday David Bowie!