How to use Macromedia Dreamweaver to create your own FLV Player

home : help center : How to use Macromedia Dreamweaver to create your own FLV Player

How to use Macromedia Dreamweaver to create your own FLV Player

This guide provides instructions for a simple example of how to prepare and stream Flash video (.FLV) files using Macromedia Dreamweaver.
This guide was written for OnyxServers.com flash streaming customers.
Adobe Flash CS3 users please refer to our How to use Adobe Flash CS3 to create your own FLV Player guide.
An evaluation copy of Macromedia Dreamweaver can be downloaded from: https://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver

Step 1: Encode and upload your flash video clip(s)
Step 2: Create the .swf and .html files
Step 3: Upload any files generated by Dreamweaver (i.e. .swf, .html)

Step 1: Encode and upload your flash video clip(s)

If your media clips are not already in flash video format, you will need to encode them into .FLV files. You can use Adobe Flash Video Encoder or any other FLV encoder for this. If you do not have an FLV encoder, you can download and use Riva FLV Encoder, which is free, from http://www.rivavx.com/?encoder.

Riva FLV Encoder users PLEASE READ!

Riva FLV Encoder does not properly insert meta data into the encoded FLV files. This usually results in playback problems such as the scroll bar not showing or the inability to jump to different portions of the video during playaback. A free tool available for Windows, called FLV MetaData Injector, can be used to fix this. You can download FLV MDI from http://www.buraks.com/flvmdi/

FLV MDI is a command line tool so you might want to grab the Windows user interface for it which is available for download on the same page.

You can also insert FLV meta data from our servers:

If you are familiar with SSH (Secure Shell), you can login to your account via SSH and use yamdi to insert FLV meta data. Sample usage:

>> yamdi -i video.flv -o correctedvideo.flv

If you are not famliar with SSH, you can just upload your FLV videos and send us an e-mail. We'll insert the FLV meta data for you.

A commercial FLV encoder which is highly regarded in the Flash community is Sorenson Squeeze: http://www.sorensonmedia.com

For a list of encoders listed on download.com, click here.

How to encode your clips using Adobe Flash Video Encoder:

Start Adobe Flash Video Encoder.

Drag any video clips you want to encode into the queue (or use the 'Add' button):

Click on 'Settings' and under 'Encoding Profiles' select the desired bit rate (default should be Medium Quality).

Click on 'Video' and set the 'Video codec' to 'On2 VP6'.

Click 'OK'.

Click 'Start Queue' to start the encoding process. The encoded Flash video (.FLV) files will be saved on your computer.

Uploading your flash videos (.FLV files):

Your flash videos (.FLV files) must be uploaded into the folder called 'media' your account. The path to the 'media' folder is:

public_html / flash_stream / vod / media /

e.g.
public_html/flash_stream/vod/media/clip1.flv
public_html/flash_stream/vod/media/clip2.flv
public_html/flash_stream/vod/media/clip3.flv
etc ...

Step 2: Create the .swf and .html files

What are the .swf and .html files used for?

An .SWF file: This file contains all images, sounds and vector data necessary to play the video clip. Dreamweaver will automatically generate this file for you.
An .HTML file: This file will contain the HTML code necessary to play the video clip. Dreamweaver will automatically generate this file for you.

To create these two files, please follow these instructions:

Start Macromedia Dreamweaver and create a new HTML document.

Select 'Insert' -> 'Media' -> 'Flash Video'

Dreamweaver will now prompt you to save your HTML document because it needs to be saved to drive before a flash video component can be added. It is best to create an empty folder to save the document in.

Once your document is saved, a window titled 'Insert Flash Video' will pop up.

Change the 'Video type' from 'Progressive Download Video' to 'Streaming Video'.
For 'Server URI' parameter, enter:

rtmp://Your_Domain_or_IP/vod/media/

Replace 'Your_Domain_or_IP' with your domain name (do not include the www. portion!). If your account has been assigned a dedicated IP address, you can enter the IP address instead of your domain name.

PLEASE NOTE: Notice that there is no reference to the flash_stream/ directory in the URI. This is not a mistake.

For 'Stream name', enter the name of the .FLV file you uploaded (e.g. myclip.flv).

Change any other variables as you see fit and click on OK to close the dialog. You should now see something like this:

You can preview the streaming video on your browser by selecting 'File' -> 'Preview in Browser'.

Troubleshooting Tip: Video clip not playing?

Your Flash player has a built-in security measure which prevents flash documents residing locally on your computer from accessing video clips residing on the internet. To make an exception, you will need to change the 'Global Secuity Settings' of your Flash player. Here's how:

Select either Firefox or IExplorer from the 'File' -> 'Preview in Browser' menu in Dreamweaver to preview your document.
Right click your mouse on the flash player window inside the browser and select 'Settings...'. Note that the video player window might not be visible if your document background is white!
A small window will pop-up. Click on the 'Advanced' button.
A new web page titled 'Flash Player Help' will open up in a new browser window. Click on the 'Glabal Security Settings Panel' link on the left hand side.
Click on the 'Edit locations...' pulldown menu and select 'Add location...'. Type in host.onyxservers.com and click 'Confirm'.

General audience note: Enter the address to your 'Flash Media Server' server.
Change the option 'Always ask' to 'Always allow'.
Close the 'Flash Player Help' web page and try selecting 'File' -> 'Preview in Browser' again from within Dreamweaver.

Your Flash player should now be able to connect to the server from your computer.

If everything is working well, the video clip will start streaming.

Step 3: Upload any files generated by Dreamweaver (i.e. .swf, .html)

Dreamweaver saves the FLV player in the form of one or more files with the extension .swf. These files need to be uploaded to your media streaming account. To view the name of these SWF files, select the flash video instance you created and click on the link titled 'Show required files...'.

You can upload the .swf and .html files generated by Dreamweaver anywhere under your public_html/ folder. These files do not need to be uploaded into your flash_stream/ folder. Just make sure they reside in the same folder (unless you have changed the path to the SWF file in the HTML code).

PLEASE NOTE: If uploading your files using the webcontrol file manager tool, the public_html/ folder is referred to as the 'web root'.

You can now watch your video stream by pointing your browser to the Dreamweaver generated .html file.

To embed the video into your web pages, copy and paste the code found inside the .html file.