Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you have your FLV files, adding Flash video to your site is literally one click away. When adding an FLV to your site, Dreamweaver presents you with options on how your video player should look and operate. Although these options are limited when compared to developing video within Flash, I think you'll find them surprisingly powerful and adequate for most of your video delivery needs. So I have the index page opened in the 15_05 folder. And if I scroll down, I can see that I have an area right down here where our monthly podcast teaser video needs to go.
So I'm going to click right in that empty spot between the headline and the body copy, and I'm going to inset our FLV file on the page. Again, there's a couple of different ways that I can do this. I can go to Insert > Media > FLV. Or if I go up to my Common objects, I can go to Media > FLV. So either way. I'm going to go ahead and choose to insert the FLV on the page, and when I do, I get a dialog box from Dreamweaver where I can set the properties for my Flash video. Now you get two choices between video type.
Progressive Download or Streaming Video. Unless you're using the Flash Media Server or have a hosting service that is going to be streaming video for you, you're probably going to be doing Progressive Download. Progressive Download is going to playback a video that's hosted on your server, but it isn't necessarily streaming. It is the most common form of Flash video delivery. I'm going to choose Progressive Download and for the URL, I'm just going to browse for the source. So I'm going to browse to the 15_05 folder, go in our _video directory, and of the two, I'm going to use the large movie.
So podcast_teaser_large. I'm going to click OK, and at this point Dreamweaver is going to give us a couple of other options about controls that we can use, how those control should look and behave, and one of the first things I want to do is detect the size of this movie. So I'm going to click Detect Size. That way it gives me a width and a height, and you'll notice that if I grab the pulldown menu, several of the skins have a minimum width that your video needs to be. Now our video is 480 pixels so we can really choose any skin that we want.
Now in reality, even it looks like you have 9 skins but in reality you have 3. There's the Clear Skin, which is a transparent skin that goes right over the movie. You have the Corona Skin, which is a slightly different interface look. And then you have the Halo Skin. Now between these three, you can usually find one that looks pretty good with your site. I'm going to choose the Halo Skin 3. That's going to give me a play button, pause button, a stop button, a seek bar, a mute button, and a volume bar. So that's pretty much the whole kitchen sink of your controls.
Notice that these other versions don't have as many controls, so you can choose one based upon the amount of controls you need for your movie. We also have an Auto play feature and Auto rewind. Auto play obviously would start playing the video as soon as it loads. I'm not a big fan of that, because especially for video like this where it's down the page a little bit, a lot of times the audio will start playing and somebody will wonder what's going on. They'll miss that impact of the movie. I prefer to let my users control when the video starts. Auto rewind means that when the movie is done, it'll rewind to the first frame of the movie.
The seek bar is working fine. I have a mute, and I have my Pause and my Play buttons. I can seek and I've there my Stop button. So my video is working perfectly. Now I want to encourage you to experiment with some of the other video player settings. Choose a few of the other skins and see how they might fit your site's design. Flash video integration in Dreamweaver removes any barriers you might have had in delivering video to your audience. Obviously, bandwidth, audience and overall site goals have a lot to say about whether your site really should feature video.
However, if video is right for your site, Dreamweaver makes it incredibly easy to implement.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.