Join Lisa Larson-Kelley for an in-depth discussion in this video Configuring Flash Media Playback's general settings, part of Publishing Video with the Flash Platform.
Flash Media Playback is a free pre- built media player that's hosted by Adobe. In this lesson, I'll show you how to configure it by using the Flash Media Playback Setup page, which generates the embed code for you. To tell Flash Media Playback what video to play, you have to tell the player.swf where to find it. This is done through the HTML embed code. What is embed code you might ask? Well, to include a Flash SWF in an HTML document, you write some HTML that points to the SWF location. This is embed code.
Typical embed code for Flash Media Playback looks like this. Now in this code, you can add information called variables, or FlashVars, that get sent into the SWF when it loads. It's these FlashVars that tell Flash Media Playback SWF which video to load, what you want the player to look like, and so on. The easiest way to create and edit this embed code is to use Adobe's Flash Media Playback Setup page. Let's start there. Let's point our browser to the page, which is located on the OSMF site at this URL.
So here we're presented with this interface, with settings on the left and a preview of the configured player on the right. Now I should note here that I am demonstrating the first version of this online tool, so as new features are added, you might be seeing a slightly different interface. Right now, this Flash Media Playback Player is configured to play the default video here at this URL. We can play it and see the player in action. (Female Speaker: Flash Media Playback is Adobe's turnkey OSMF player. It's actually hosted by) (Female Speaker: Adobe so that any person who wants to incorporate video on their web site, they can point to) (Female Speaker: Flash Media Playback through their embed code and have instant video playback. Flash Media Playback--) So let's go ahead and configure Flash Media Playback to play our video.
The first thing we'll do is tell the player what video we want to play. This video needs to be on a web server so Flash Media Playback can load it and play it. I've uploaded a sample video for you to use in this exercise, so we'll use that URL--and we type it here in Video Source. Next, we're asked if we're using HTTP Streaming or Flash Access 2. Now we're not using either; we're just using standard progressive delivery with no Flash Access content protection, so we'll leave this checked at No. Next, we need to set the width and the height of the player.
This should be the dimensions of our source video. And in our case, it is 480 x 300, and this size will fit nicely into our web page. Now we can choose if we want the control bar to float over the content or be docked below it. I like to control bar overlying the video, because it gives a clean, self-contained video player. So we'll choose Floating, and have it autohide when not in use. Next, we can specify a preview image, or a poster frame.
You can select any bitmap image for this. It can be a PNG, a JPEG, or a GIF. Again, we need a web-accessible URL for this image, so we'll have to be sure it's posted up somewhere on a web server. I've uploaded a JPEG image to serve as our poster, so we'll enter that URL here. Now, I do recommend using the JPEG format for photos or for screen grabs from video because JPEG gives the best quality and compression for that type of image. If you're using something with flat color, like a logo, you can use a GIF or a PNG for those images.
Next, we can choose if we want a Play button overlay-- that's the big Play button that appeared on top of our video before we played it. That's really become a standard expected feature in video players, so it's nice to have as an option built in. So we'll leave that checked as Yes. Finally, we'll tell the player not to autoplay or autoloop. I like to give people a choice whether the video plays right away when they go to my web site. It can be pretty annoying to have a loud video kind of playing at you when you first arrive at the site. Finally, we're ready to create our embed code.
All we need to do to do that is to click Preview, and this embed code here is updated with all of the information that we put into the settings. So let's test this video player, which we can do right here in this page. (Male Speaker: I'm Ron Askwood and I'm standing on our family farm.) And yes, our video does play. So the next step is to copy this code and paste it into our web page, and we'll do that in an upcoming lesson.
This lesson demonstrated how to configure Flash Media Playback by using Adobe's Flash Media Playback Setup page. You should now have an understanding of how to set up the player for basic playback.
- Converting a video for Flash playback
- Using the Adobe Media Encoder
- Adding custom metadata to a video
- Building a custom player with the FLVPlayback component
- Embedding video in a web page
- Adding navigation cue points
- Publishing with Flash Media and Strobe Media Playback
- Uploading files to a web server