How to show a poster frame on the webpage to open a movie.

Upload the movie file and a JPEG poster image of the same size in a folder to the root folder on your server.

Enter the URL to the Movie File and the JPEG image in the code below. Adjust the frame size to that of the movie.

<script src="http://www.apple.com/library/quicktime/2.0/scripts/prototype.js" language="JavaScript" type="text/javascript"></script>

<script src="http://www.apple.com/library/quicktime/2.0/scripts/qtp_poster.js" language="JavaScript" type="text/javascript"></script>

<link href="http://www.apple.com/library/quicktime/2.0/stylesheets/qtp_poster.css" rel="StyleSheet" type="text/css" />

<a href="http://www.domain.com/Folder-Name/Movie.mov" rel="qtposter">

<img src="http://www.domain.com/Folder-Name/Poster-Image.jpg" width="640" height="490" />

</a>

Click the button to compare the same movie uploaded to Vimeo...

The QuickTime Pro  “Export for Web” function creates a reference movie, a poster frame image and different movie files suitable for playing on various devices. The reference movie automatically selects the most appropriate version to suit the visitors’s device and internet connection.

The image to the right shows “My-Movie” being exported in the various formats to a folder - QTRef.

The resulting folder contains the three different movie files, the poster image, the reference movie and an HTML file.

Upload the folder to the root of your server.

Use the code below in an HTML Snippet and enter the URL to the movie file and the poster image.

<script src="http://www.apple.com/library/quicktime/2.0/scripts/prototype.js" language="JavaScript" type="text/javascript"></script>

<script src="http://www.apple.com/library/quicktime/2.0/scripts/qtp_poster.js" language="JavaScript" type="text/javascript"></script>

<link href="http://www.apple.com/library/quicktime/2.0/stylesheets/qtp_poster.css" rel="StyleSheet" type="text/css" />

<a href="http://www.domain.com/QTRef/My-Movie.mov" rel="qtposter">

<img src="http://www.domain.com/QTRef/Poster-Image.jpg" width="640" height="490" />

</a>

Click the button to compare the same movie uploaded to Vimeo...