Embedding Quicktime videos with preview picture


Warning: Use of undefined constant vs - assumed 'vs' (this will throw an Error in a future version of PHP) in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 38

Warning: Use of undefined constant simplicity - assumed 'simplicity' (this will throw an Error in a future version of PHP) in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 38

Warning: A non-numeric value encountered in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 38

Warning: A non-numeric value encountered in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 38

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


Warning: Use of undefined constant vs - assumed 'vs' (this will throw an Error in a future version of PHP) in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 41

Warning: Use of undefined constant simplicity - assumed 'simplicity' (this will throw an Error in a future version of PHP) in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 41

Warning: A non-numeric value encountered in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 41

Warning: A non-numeric value encountered in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/single.php on line 41

Warning: count(): Parameter must be an array or an object that implements Countable in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/comments.php on line 33

Warning: count(): Parameter must be an array or an object that implements Countable in /home/vssrvorg/public_html/wp-content/themes/vs-simplicity/comments.php on line 34

Comments are closed.