LIBRARY:

Video Tutorials

Reviews

Embedding Quicktime Movies


	COW Library : Abraham Chaffin : Embedding Quicktime Movies Web Design Tutorials : (print friendly)

A Quicktime Tutorial

Embedding Quicktime Movies

In this tutorial you will learn the ends and outs of embedding quicktime movie files; MOV, MP4's and other quicktime video formats. Additionally you will learn how to use Adobe Dreamweaver CS3 to embed your Quicktime Movie. An overview of how to use embed, object, and activex elements are discussed in this tutorial as they relate to embedding Quicktime Video.

Abraham Chaffin
CreativeCOW.net,
Cambria, California USA

©2007 CreativeCOW.net. All rights reserved.

Introduction

Publishing your Quicktime movies to the web can be done in different ways but not all deliver your video with the fewest amount of problems in all the most popular browsers. The most basic way to allow people to see the video is to provide a direct link to the file. This allows the user to either download the movie, save it to their computer or view it directly in their browser. While this is the most basic way it is not the most effective presentation.

A better way to display your movie is to embed it into your web page, blog, or another web site. In the next few steps you will learn about embedding quicktime movies into an html page starting with the most basic methods and moving later to more complex but more effective and elegant methods.

The Embed Element

The html code below is the most basic code required to embed your quicktime movie:

(Dreamweaver CS3 window used to insert code to the right)
<embed src="http://www.yourdomain.com/your-video.mov" height="256" width="320"></embed>

Attributes:

src	Sets the URL to be loaded by the embed object.
height	Sets the height of the embed object. This should be 16 pixels more than the actual height of your source video to account for the 16 pixels used up by the quicktime movie controls.
width	Sets the width of the embed object. This can be the actual width of the video.

Note: The height and width can be set much higher than the actual movie size and it will not distort your movie though it will add space around your video.

To create this code using Dreamweaver go to the Insert Menu > Tag > Choose HTML Tags > Choose embed > click Insert. Enter the URL of your Quicktime movie, the height, and the width. Additional parameters include:


hspace="10" vspace="10" hidden="true" autostart="true" loop="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"

Attributes:

hspace	Sets the horizontal spacing from your element
vspace	Sets the vertical spacing from your element
hidden	Sets to hide your video or not : true / false
autostart	Sets to auto play your movie : true / false
loop	Sets to continuously loop your movie : true / false
type	Set this to video/quicktime for quicktime movies
pluginspage	Where the user can grab the plug-in to play the movie through their browser. Use http://www.apple.com/quicktime/download/

To insert additional parameters/attributes to your embed element in Dreamweaver select your embedded video and click Parameters... from the Properties pane.

The Object Element

Most commonly when embedding quicktime movies there is an Object element around the embed element. The OBJECT element is used to include objects such as images, audio, videos, Java applets, quick time movies, and Flash animations. Including this element when embedding your movie adds additional support for the required plug-in needed to play the quicktime movie. This element also increases browser compatibility. Many of the parameters set in this object repeat those set in the embed element. The new embed html code that includes this element looks something like the code below:

(Dreamweaver CS3 window used to insert code to the right)


<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320"> 



<param name="src" value="http://www.yourdomain/your-video.mov">

<param name="autoplay" value="true">

<param name="type" value="video/quicktime" height="256" width="320">

  

  <embed src="http://www.yourdomain/your-video.mov" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed>
  



</object>

Attributes:

classid	Used to specify an implementation for the object. Use 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B for Quicktime movies
codebase	Used to specify the download location for different plug-in controls. Use http://www.apple.com/qtactivex/qtplugin.cab for Quicktime movies

Note: The additional repeated parameters should be repeated as in the example above.

To create this code using Dreamweaver select the embedded element and then go to the Insert Menu > Tag > Choose HTML Tags > Choose object > click Insert.

Input clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B for the Class Id
Input http://www.apple.com/qtactivex/qtplugin.cab for the Codebase
Codetype and Type are video/quicktime

The other parameters are not important for this tutorial.

Click to Play Quicktime Video

Setting up your Quicktime Movie to play only when it is clicked on is important for the best performance and cross platform and browser compatibility. When Quicktime Movies download and play when a user enters the page many times the users' browser locks up, freezes, crashes, or it causes the page to load extremely slow. This problem is most common in the Internet Explorer browser. A good work around to fix this is load a single frame placeholder movie that the user can click on to play the full length movie. This requires that you create an additional single frame Quicktime Movie that will let them know they need to click it to see the full length movie.

To achieve this some adjustments must be made to the embed element. The src parameter must be changed to the URL of the placeholder single frame movie, and autoplay must be set to false. Additionally a few new parameters must be added:


controller="false" href="http://www.yourdomain/your-video.mov" target="myself"

The new embed html code that includes this element looks something like this:


<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320"> 



 <param name="src" value="http://www.yourdomain/clickhere.mov">

<param name="autoplay" value="false">

<param name="target" value="myself">

<param name="controller" value="false">

<param name="href" value="http://www.yourdomain/your-video.mov">

  <param name="type" value="video/quicktime" height="256" width="320">

  

  <embed src="http://www.yourdomain/clickhere.mov" height="256" width="320" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" controller="false" href="http://www.yourdomain/your-video.mov" target="myself"></embed>
  



</object>

Attributes:

controller	Sets whether the quicktime controls are shown or not : Set true / false
href	The URL of the Quicktime Video to be played when the embed element is clicked
target	Destination of the href attribute should be set to myself to play the movie in the same place object

ActiveX Embed Using Dreamweaver

Internet Explorer blocks embed and objects tags unless they are embedded using special Javascript. This next step will explain how to arrive at the final step using Dreamweaver's Insert ActiveX embed method.

If you are using Dreamweaver CS3 the previous portions of this tutorial were background of how embedding works and not actually how to Embed your Quicktime movie so if you did each step in Dreamweaver delete everything you did and just do this step.

Go to the Insert Menu > Media > ActiveX. Bypass the Object Tag Accessibility Attributes by clicking Okay. Dreamweaver will write code to embed javascript, the object tag and the embed tag. Select the new ax element in your web page and setup the parameters for your Quicktime movie in the Properties pane.

Dreamweaver ActiveX Properties

Put in clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B as the ClassID.
Check the Embed box and enter the URL of your Src Quicktime movie file or your Click here movie if you decide to use a single frame placeholder movie. Note: When browsing for your file you may need to choose All files from the Files of type drop down.
Use http://www.apple.com/qtactivex/qtplugin.cab for the Base / Codebase.
Enter the height and width of your movie, remember to add 16 pixels to the height to accommodate the quicktime controls.

Click on the Parameters... button to open the Parameters window for the ActiveX object.

For this example parameters should be as follows:

controller	false
href	http://www.yourdomain/your-video.mov
autoplay	false
target	myself
bgcolor	#ffffff

Once you save and upload your files properly to the internet you should have a functional embedded Quicktime Movie that works effectively on multiple browsers and multiple platforms.

For an example of a page that uses this method - click here.

Have fun!


	Digg it	Add Comment

Related Articles / Tutorials:

Recent Articles / Tutorials:

MORE