Embedding Quicktime videos with preview picture
2008-04-21 15:47 | Posted by Shane Magee | Permanent Link | Documentation
(
0 votes)
To embed a quicktime video, use the following code:
<object width="400" height="274"> <embed src="video.mp4" type="application/quicktime" wmode="transparent" width="400" height="274" autoplay="true"> </embed></object>
The autoplay argument determines whether the video plays or not immediately the page is loaded.
There are also other arguments you can add just like autoplay:
- loop="true"/"false"— the movie plays once or continuously.
- controller="true"/"false" — toggles the playback controls e.g. pause, fast forward, or mute.
The full range of options are available on the Apple Quicktime site:
http://www.apple.com/quicktime/tutorials/embed2.html
Preview Picture
With the above, what you get is basically a black box with a grey control bar below. Perhaps you would like to have a preview picture that loads the film when it is clicked on, just like Youtube embeds
The first thing you need to do is create the picture to be the same size as the video + 16px height to allow for the controllers. If you don't do this the image gets squeezed/expanded to fit the video screen.
Then you need to save your image as something quicktime can deal with (eg .mp4). For this you need Quicktime Pro (costs $30) or for Mac you can use QTAmateur, available here:
http://www.mikeash.com/?page=software/qtamateur/index.html
Open up your image with either of these and then click File -> Export, and save to MPEG-4 (mp4), I think .mov also works
You can then use this code to embed
<object width="400" height="274"> <embed src="images/preview_image.mp4" href="video.mp4" target="myself" type="application/quicktime" wmode="transparent" width="400" height="274" autoplay="false"></embed></object>
where preview_image.mp4 is your created image and video.mp4 is your video