Inserting Video using Dreamweaver [Part 1]

A number of people requested me to show them how to insert videos onto their web pages using Adobe Dreamweaver.  This tutorial is specifically for them.  I am going to use Version CS 5.5 of Dreamweaver in this tutorial.  Please, follow along either with this version (Demo Version can be downloaded from the internet, via adobe’s website) or you can also use the earlier versions, which are also similar. In this tutorial, I will show both approaches using tables and divs.  The first part (this document) is just a basic approach where I will be using basic html to accomplish whilst the second part (Part 2 of this tutorial) is kind of intermediate in which I will demonstrate using xhtml and CSS.  Also in the second part, I am going to switch between the design and code views.  That part is just a modification of what would be created in this tutorial (Part 1).  I am going to show how you could replace tables with divs and control those divs in CSS. By the way, I assume that whoever reads this tutorial has a fair knowledge of Dreamweaver and basic html coding.  If you are new, look out for my other tutorial on the introduction of Dreamweaver, a brief overview of the workspace and it’s interface and also Html Basics, another introductory tutorial on HTML.

The video which I will be using is a sample video from the Microsoft Windows 7 Operating System.  

By the way, if you want to download the PDF version of this tutorial, please visit my website ArTech and download from there.

1.0: Creating the page. 

Let’s create a blank html page 

STEPS: 

From the Screen, under “Create New” click HTML (outlined in red) 

This will create a new blank HTML page 

2.0: Adding a table 

Now create a table to hold the video file 

STEPS: 

2.1 Go to insert > Table 

2.2  Modify the table setting accordingly and click OK 

2.3  Align the Table to Centre using the properties panel 

While the table is still selected, align it to centre.  Click the drop-down tab of align option and set it to centre.  This will centre the table.

2.4  Once the table is centred, left-mouse click inside the table cell.

You’re set to add video now so the next few steps will show you how to add video. 

IMPORTANT: 

In order for you to proceed to the next step, you should make sure you have a compatible video file available and I mean a video file with format .FLV.  If you don’t have one yet, I recommend you read my other tutorial on Converting video formats to FLV. 

3.0: Inserting Video 

So you have a valid .flv video?

You also have your page saved ready to insert video.

 STEPS: 

3.1   Go to Insert > (down to) Media > (across to) FLV 

3.2  Adjusting Settings

Choose based on setting; 

Video type:Progressive Download Video 

URL:Click the browse button to locate your video (FLV format) 

Skin:Select from a range of skins provided.   

This will be the play controllers for the video on your pages. 

Width & Height: Click Detect Size.  (Do this after selecting your file via the URL

option)  

Auto play: For the video to automatically play when the page loads.  Else,

leave it unchecked so the user can play it themself. 

Auto Rewind:  For the video to automatically go to the beginning once completed. 

Else leave it blank.

NOTE:

It is best to leave the last two; 

Auto play and Auto rewind, unchecked.

 4.0: Testing the Video 

Test the video to make sure it works in the browser.

4.1  Preview in Browser

Within the workarea,click the Preview/ Debug in Browser icon and preview that in your browser.

4.2  Play Video

Use the Controls to test the video and sound. 

Well, that’s it.  That’s the END of Part 1 and I hope you’ve learnt something here.

 There are also video versions of all tutorials which are very interactive / informing and if you

would like to know more about those, please contact me on email tribaltoonsATgmailDOTcom

  

ENJOY 

Another tutorial by ArTech