Adobe Dreamweaver CS5 Tutorials
Inserting Media / Inserting Flash Video
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Dreamweaver CS5 / Inserting Media / Inserting Flash Video)
Continuing my review of the different types of content that you can insert into Dreamweaver CS5 we now come to Video. It's very easy to add Flash Video files in the FLV format to your Web Pages without using the Flash Authoring Tool. If you open up the flash video file in the Work Files folder you'll find this file and if you go into Live View, press the Play button, notice that this will play a short little video here complete with a Control Strip here for Pausing, Stopping and Playing the video as well as a little Volume control for muting and turning on the volume. Go ahead and stop that and move out of Live View. You can download FLV files from popular video streaming sites like YouTube using a variety of tools. I like to use a free Firefox plug-in called Download Helper to convert an existing video file to the FLV format. You can use a number of free or inexpensive video conversion utilities. Do a Google check on FLV Converters. These are options if you don't have Flash Professional. If you do have Flash Professional one of the versions you can use the Adobe Media Converter to complete these conversions. This is a standalone application that ships with Flash Professional. Now when you do insert FLV files into Dreamweaver, Dreamweaver doesn't actually insert the video file into the document. It inserts an SWF component very similar to the SWF file that we inserted in the previous movie. This is a component that displays the FLV file when viewed in a browser. This component displays the selected FLV file as well as a set of playback controls that you saw here on the bottom. Again, it's important that this video file is in your Local Root Folder and that you keep track of it because it's not contained in this Dreamweaver document. Again, if we look at the Source Code all you'll see here is the code that sets up the parameters for playing the video as well as the SWF file player and then the link to the video itself, the FLV file. So be sure to upload that FLV file and any associated files that come with the skin. They call it a skin. That's the video playback player there on the bottom. Make sure you upload all those documents to your server or this video will not play back when you move it. Let me now review the procedures for inserting and setting the properties of your FLV Videos. First off, let's move into Design View and let's delete this existing video and then choose from the Main Menu, Insert, Media. This time we're going to choose FLV. That'll bring up the Insert FLV dialog box where you can choose the Video type: Progressive Download or Streaming Video. Progressive Downloaded Video is probably the one you'll want to start with. This downloads the FLV file to the site visitor's hard disk and then plays it. Unlike traditional download and play methods of video delivery, however, Progressive Download allows a video file to start playing before the download is complete. The other option, Streaming Video, the video content is played on the Web page after a short buffer period that ensures smooth playback. To enable Streaming Video on your Web Pages you must have access to Adobe Flash Media Server. The most common method for doing that is to hire the services of a media server and serve your streaming video from that server using the Server URL box down here below. Using either of these methods, Streaming Video or Progressive Download, you must have an encoded FLV file before you can use it in Dreamweaver. You can insert video files created with two kinds of Codecs. These are Compression Decompression technologies. You'll want to write these down: Sorenson Squeeze or the On2 VP Codec. Also you should know that to view FLV files your users must have the Flash Player 8 or later installed on their computers. If a user does not have the required version of Flash or any Flash Player installed the user will just see a gray rectangle. With the later versions of Dreamweaver, including Dreamweaver CS5, Dreamweaver inserts code that detects whether the user has the correct version of Flash Player to view the video, or any Flash Player. If the user does not have the correct version or no player at all the page displays alternative content that prompts the user to download the latest version of the Flash Player. When choosing the Progressive Download Video option here in the URL textbox you'll need to then browse to the location of the video you want to insert. Let's do Sample NTSC2 from the Work Files folder. Again, this must be in your Local Root Folder or this video file will break the next time you open up Dreamweaver to play this file back. I've chosen a relative path here to my Local Root Folder. You can also choose to specify an absolute path by typing the URL. For example: www.example.com myvideo.flv. The Skin specifies the appearance of the video component. A preview of the selected Skin appears beneath the drop-down menu here. Shows a variety of Skins that come preinstalled with Dreamweaver. You can go to the Dreamweaver Exchange site and look for additional video playback skins. The Width and Height specifies the dimensions of the FLV file. You'll need to put in the dimensions or, more commonly, you'll just click on the Detect Size and that will detect the size of the FLV file you're bringing in. If you don't do that you'll get an error when you click on the OK button to close the dialog. Auto play will automatically play the video when it loads into the browser. Auto rewind specifies whether the playback control returns to the starting position after the video finishes playing. Click OK then to close the dialog box and add the FLV file to your Web Page. Another important reminder, if the Insert FLV command here generates a video player SWF file and a Skin SWF file that are used to display your video content on a Web Page, these files will be stored and saved in the same directory as the HTML file, the Dreamweaver document here that you're saving. So, again, if you do move all these files make sure these SWF files as well as your FLV file get moved along with this HTML file. That's the number one problem my students have is that they will get it working at home, show it to me in the lab, or e-mail me the content and the video is not playing because they left these files behind. So there you have it. Pretty straightforward process for very easily playing back video content in Dreamweaver CS5.
Tutorial Information
| Course: | Adobe Dreamweaver CS5 |
| Author: | James Gonzalez |
| SKU: | 34157 |
| ISBN: | 1-936334-48-8 |
| Release Date: | 2010-08-31 |
| Duration: | 10.5 hrs / 121 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
