Beginning Flash Media Server 4.5 – Part 5: Streaming with OSMF players
Created
10 October 2011
Requirements
Prerequisite knowledge
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.
User level
Beginning
Required products
- Flash Media Server (Download trial)
- Flash Professional (Download trial)
Sample files
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):
- Part 1: Installing Flash Media Server 4.5
- Part 2: RTMP streaming on-demand video
- Part 3: RTMP streaming live video
- Part 4: RTMP streaming audio
- Part 5: Streaming with OSMF players
- Part 6: Using HTTP Dynamic Streaming
- Part 7: Streaming to iOS devices (to come)
- Part 8: Streaming to Android devices (to come)
- Part 9: Security features (to come)
Understanding the Open Source Media Framework
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.
Working with the Strobe Media Playback component
When you installed Flash Media Server 4.5 you also installed a Strobe player. To use it, follow these steps:
- Download the sample files provided at the beginning of this tutorial. Uncompress the ZIP file and drag the Vultures.mp4 file from the Video folder to the Flash Media Server 4.5/webroot/vod folder.
- Navigate to Flash Media Server 4.5/samples/videoPlayer and open the videoplayer.html file in your browser. The Sample Video Player launches, as shown in Figure 1.
- Change the Stream URL path to rtmp://localhost/vod/mp4:Vultures.mp4. Click the Play Stream button to play the Vultures video.
Follow these steps to play the video through the Strobe Media Player in a web page:
- Scroll down to the bottom of the Sample Video page. Locate the Embed Code area shown in Figure 2.
- Select all of the code in the Embed Code field and copy it to the Clipboard.
- Open Dreamweaver CS5.5 or any other HTML editor. Create a new HTML document and paste the code between the
<body></body>tags. - Save the file as test.html and quit Dreamweaver (or the HTML editor you are using).
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.
- Navigate to the Flash Media Server 4.5/webroot folder and copy the HTML file to that folder. Open the file in a browser and watch the video play through the Strobe Media Player (see Figure 3).
Building a Strobe Media Playback application
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:
- StrobeMediaPlayback.swf
- Expressinstall.swf
- Swfobject.js found in the lib folder
Open the Strobe folder located in the Exercise folder. Copy and paste the files to the following locations in the folder:
- Paste a copy of StrobeMediaPlayback.swf in the swfs folder
- Paste a copy of expressinstall.swf in the Scripts folder
- Paste a copy of swfobject.js in the Scripts 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:
- Open the videoplayer.html file in your browser. Change the video to Vultures.mp4, scroll down and copy the embed code to the Clipboard.
- Launch Dreamweaver CS5.5 and open the index.html file in the Strobe folder.
- In the Document toolbar click the Code button to display the Code view of the Document window, if it is not already open.
- Click once in line 19 and paste the contents of the Clipboard into the code (see Figure 5).
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.
- Locate line 19 in the code. Change the width value to 854 and the height value to 480. Also in line 19, change the ID and name values to Strobe.
- Make the same changes between the <embed></embed> tags.
- Click once at the end of line 24 and press the Return/Enter key. Add the following line of code:
<param name="allowscriptaccess" value="always">
Add the same line to the <embed> code right after the name="Strobe" setting.
Note: The AllowScriptAccess property is an HTML property of the <object> and <embed> tags that embed a SWF file. It protects an HTML file from a potentially untrusted SWF file by controlling the ability of that SWF file to call JavaScript code in the surrounding HTML file. AllowScriptAccess has three possible values: always , sameDomain , and never . The always value you set in Step 7 enables JavaScript access. Although it is not technically required, we feel it's usually a good idea to add this line to 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).
Where to go from here
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:
- Live multicast streaming using OSMF
- Creating a simple multicast video player using OSMF
- RealEyes OSMF Player Sample – Part 1: Setup and deployment
- RealEyes OSMF Player Sample – Part 2: Building and configuration
- RealEyes OSMF Player Sample – Part 3: Skinning and control bar system
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.
More Like This
- Understanding live DVR – Part 1: Implementing a live DVR player
- Webcasting live video with Flash Media Live Encoder
- Explore video content protection measures enabled by Flash Media Interactive Server 3.5
- Protecting online video distribution with Adobe Flash media technology
- Beginner's guide to streaming video with Flash Media Server 3.5
- Dynamic streaming in Flash Media Server 3.5 – Part 1: Overview of the new capabilities
- Learning Flash Media Server excerpt: Server-side streams
- Beginner's guide to dynamic streaming with Flash Media Server 3.5
- Beginner's guide to installing Flash Media Server 3.5
- Beginner's guide to security features in Flash Media Server 3.5
