 |
|
 |
| FORUMS | TUTORIALS | MAGAZINE | STOCKYARD | VIDEOS | PODCASTS | EVENTS | SERVICES | NEWSLETTER | NEWS | BLOGS |
|
Embedding Quicktime Movies
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.
IntroductionPublishing 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:
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:
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">
Attributes:
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 VideoSetting 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">
Attributes:
ActiveX Embed Using DreamweaverInternet 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. 
 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:
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!
Comments •
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Reply
Like
FORUMS • TUTORIALS • MAGAZINE • STOCKYARD • VIDEOS • PODCASTS • EVENTS • SERVICES • NEWSLETTER • NEWS • BLOGS
[Top]
