Authoring Flash Videos with Dreamweaver and the Web Stunning Player

Posted by Derrick on December 1, 2009 under Video Streaming and Compression | Be the First to Comment

Authoring Flash Videos with Dreamweaver and the Web Stunning Player is something that many will start to do.  Many have heard of the JW Player for authoring Flash content but the Web Stunning Player is another player available.  In this tutorial you’ll learn how to install the Web Stunning Player as a Dreamweaver Extension and use it to author a Flash Real-time Streaming video.

Let’s get started.  First go the Web Stunning website and download the Web Stunning FLV Player.

Once you download the player double-click the .zip file and install the Web Stunning Video Player Extension for Dreamweaver.

When you finish installing the Extension click the OK button.

With the Web Stunning Extension running you can see it displayed in the Extension Manager. Notice that the Web Stunning Player is supported on Dreamweaver 8.  It also works with newer versions as well.  Now we’re ready to start authoring our Flash Real-time Streaming video.

To get started we first need to create a new .html  web page.  In Dreamweaver go the the File Pull-down menu and select New.

At the dialog window choose HTML

and click the create button.

With your page open click Save from the File pull-down menu and save your file as WebStunningFlash.html.  You can save your web page to where you save your .html pages.

Once you name your file choose your destination click the Save button.

Now let’s insert a table to help keep the video where we want.  Select the Insert Pull-down menu and choose Table.

In the Rows text box type in 2 and in the Columns text box type in 1.

Next, click the OK button

Select the newly created table and in the Properties Inspector under Align choose Center from the Drop-down menu.

Notice that there are two rows for the table with only one column. In the first row let’s give our video a name.  Type in Web Stunning Flash Real-time Streaming for the name.  This will appear above the video.  Now, to insert the streaming video you’ll need to select inside the second row.  This space is where your video will appear.

From Dreamweaver, select the Insert Pull-down menu, then choose Media and from the Sub-menu click the Web Stunning Video Player.

Now you can see the Web Stunning Player options available.

First let’s look at the Playlist Tab.  For this tutorial you can remove all the options outside of what is mentioned here.  Remember we are authoring a Flash Real-time Streaming video which is a video that is sitting on a Flash Streaming Server.

For this exercise we’ll use a video titled bunny_532L_RT_HD12fpsS.flv that is located in the content folder of our Wowza Server.  We are using the Fastplay application for On-demand streaming.

For the next step specify the name of your Flash .flv file.  For my video I’m using bunny_532L_RT_HD12fpsS.flv.  Under Element Title type your video name.

Under Type of Main Video Select the RTMP Stream (rtmp://Server_Path/Stream_Name) option.   For Main Video type in RTMP for the protocol, the IP Address to the Server, the application name and the name of your file.  In my case I’ll input the following:

rtmp://ServerIPAddress/fastplay/bunny_532K_RT_HD12fpsS.flv

You should see your video that you’re authoring displayed in the Preview.  Select Save to retain your information.   Now switch to the Player Tab.

On the Player Tab go down to  Playback and click Auto Play.  Save your settings and click the Insert/Update button on the right hand column.

Once you choose Insert/Update your Flash video populates the 2nd row of you table in Dreamweaver.  Save your .html web page by choosing Save from the File Pull-down menu.  Now upload your .html web page to your website.  When the Dialog appears for Put dependent files? choose Yes.  This will make sure any associated files get to your web server.

Once you upload your .html web page refresh the server and type in the URL to your web page in a Web Browser.  Your video should appear and play automatically.  Here’s what my video looks like using the Web Stunning Flash Player.