Adobe
Anmelden Meine Bestellungen Mein Adobe

Von Tom Green

Tom Green

Von Joseph Labrecque

Joseph Labrecque

Content

Created

10 October 2011

Seitentools

Flash Media Server Flash Professional OSMF RTMFP streaming video

Erforderliche Kenntnisse

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.

Niveau

Einsteiger

Erforderliche Produkte

Beispieldateien

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):

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:

  1. 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.
  2. 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.
Figure 1. The installation of Flash Media Server 4.5 contains a Strobe Media component.
Figure 1. The installation of Flash Media Server 4.5 contains a Strobe Media component.
  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:

  1. Scroll down to the bottom of the Sample Video page. Locate the Embed Code area shown in Figure 2.
fig03_thumb Bild vergrößern
Figure 2. Copy the embed code to add the player to an HTML document (click to enlarge).
  1. Select all of the code in the Embed Code field and copy it to the Clipboard.
  2. Open Dreamweaver CS5.5 or any other HTML editor. Create a new HTML document and paste the code between the <body></body> tags.
  3. 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.

  1. 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).
Figure 3. The test video plays in the browser.
Figure 3. The test video plays in the browser.

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
Figure 4. The Strobe Playback Player files.
Figure 4. The Strobe Playback Player files.

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:

  1. Open the videoplayer.html file in your browser. Change the video to Vultures.mp4, scroll down and copy the embed code to the Clipboard.
  2. Launch Dreamweaver CS5.5 and open the index.html file in the Strobe folder.
  3. In the Document toolbar click the Code button to display the Code view of the Document window, if it is not already open.
  4. Click once in line 19 and paste the contents of the Clipboard into the code (see Figure 5).
fig05_thumb Bild vergrößern
Figure 5. Paste the embed code to add the video to an HTML page (click to enlarge).

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.

  1. 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.
  2. Make the same changes between the <embed></embed> tags.
  3. 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.

fig06_thumb Bild vergrößern
Figure 6. Review the final version of the code and then save the HTML page (click to enlarge).

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).

Figure 7. The video plays using your copy of Strobe Media Player.
Figure 7. The video plays using your copy of Strobe Media Player.

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:

In the next tutorial, you'll examine the process of streaming video using HTTP Dynamic Streaming.

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

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

Produkte

Lösungen

Branchen

Hilfe

Lernressourcen

Bestellmöglichkeiten

Downloads

Über Adobe

Region wählen

Copyright 2012 Adobe Systems Incorporated. All rights reserved.

Nutzungsbedingungen | Richtlinien für den Datenschutz und Cookies (Aktualisiert)