10 October 2011
Some previous experience working with Flash Media Server is recommended. Prior knowledge of web design concepts and using HTML to play Flash video online is helpful.
This article is the fifth in our series of beginning-level tutorials about working with Adobe Flash Media Server 4.5. In this tutorial you'll learn how to use Flash Media Server 4.5 to stream a video through a Strobe Media Playback player—available through the Open Source Media Framework (OSMF).
Here are all of the articles in the series (links will become active as the articles are published):
Previously you used the FLVPlayback component to stream a video through Flash Media Server 4.5. Although the FLVPlayback component was easy to use, the component created a relatively large SWF file size (approximately 52 KB). To reduce the overall file size, many developers created special video players with slimmed-down versions of the component, writing custom ActionScript functions to make their players work more efficiently. As a result, a myriad of overly complex or basic video players were released—and frustrated developers spent more time attempting to make the player work than concentrating on perfecting the user experience.
This all changed a couple of years ago when Adobe introduced the Open Source Media Framework and Strobe Media Playback component. The term open source means that you can access the Flash and ActionScript source files and customize the code to build your own video player. When you work with OSMF, the SWF file for the video player is hosted on your own HTML server so it's easy to track and update. Additionally, the OSMF project is a work-in-progress, ensuring that it is continually updated to take advantage of the latest features in Adobe Flash Player.
Strobe Media Playback is very easy to use. You can add video content—either streamed through Flash Media Server 4.5 or HTTP—by simply adding the embed code to a web page. No ActionScript programming is required.
It could just be that the combination of Flash Media Server 4.5 and Strobe Media Playback is a dynamic duo when it comes to media streaming. The next section shows you how it works.
When you installed Flash Media Server 4.5 you also installed a Strobe player. To use it, follow these steps:
Follow these steps to play the video through the Strobe Media Player in a web page:
Caution: In Step 4 you named the file test.html instead of index.html because the Flash Media Server Start Screen is the index.html file in the webroot folder. If you save a file named index.html to the webroot folder, the new file you create will overwrite the Start Screen.
Now that you know how to work with the Strobe feature, let's explore a more practical use for it. In this section you'll learn how to create an application that uses a copy of Strobe Media Player which resides on your website, rather than in the server installed on your computer.
As we mentioned previously, Flash Media Server applications always exist in their own folder. In this example, you'll create a new application. The primary difference between this exercise and "real life" is that your RTMP path will point to a real live Flash Media Server rather than the webroot folder used in this exercise.
Begin by preparing the project for FMS. Open the Exercise folder in the sample files, locate the folder named StrobemediaPlayback1.5.1-full, and open it.
The folder contains an uncompressed version of the Strobe Media Playback downloaded from the SourceForge website. You'll use the folder named Flash Player 10.1. Although there are a lot of files, as shown in Figure 4, you only need the following three files for this exercise:
Open the Strobe folder located in the Exercise folder. Copy and paste the files to the following locations in the folder:
After locating the copies of these files, drag the Strobe folder to the Flash Media Server 4.5/webroot folder.
After setting things up, you are ready to stream the Vultures.mp4 file you played in the previous exercise:
Next, you'll make a few changes to the code to point it to the Strobe folder. You'll also update the dimensions to play the video at its full size: 854 x 480 pixels.
<param name="allowscriptaccess" value="always">
Add the same line to the <embed> code right after the name="Strobe" setting.
AllowScriptAccess property is an HTML property of the
AllowScriptAccess has three possible values:
sameDomain , and
never . The
<object> and <embed> tags.
Your code should resemble Figure 6. If it does, save the changes and quit Dreamweaver.
Move the Strobe folder to the Flash Media Server 4.5/webroot folder. Double-click the index.html file that you just created. The page opens, the video plays, and you get to join in on the hunt for baby vultures (see Figure 7).
In this tutorial, you learned the basics of using OSMF and Strobe Media Playback in a Flash Media Server 4.5 project. To learn more about building FMS applications to play streaming video files, check out the following articles authored by David Hassoun and John Crosby:
In the next tutorial, you'll examine the process of streaming video using HTTP Dynamic Streaming.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Tutorials & Samples