Building progressive video players in Flash with the Adobe Open Source Media Framework

The following lessons cover all the basic functionality and concepts required to build progressive video players in Flash CS4 Professional using the Open Source Media Framework. The OSMF is Adobe's community-centered approach to standardizing the way that media players—in particular, video players—are built on the Adobe Flash Platform. Although still in prelease, the OSMF encompasses media playback functionality, playlists, branding, advertising, and other monetization aspects, and represents a powerful and comprehensive attempt to standardize a huge portion of the work currently executed in Adobe Flash.

If you are interested in building streaming video players, follow my companion course, Building streaming video players in Flash with the Adobe Open Source Media Framework.

Lessons for building progressive video players in Flash

In these lessons you'll start with the basics and work your way up to a fully functioning video player authored from scratch using the OSMF and Flash. Have fun! (Total course duration: 1 hr. 30 min.)

Introduction: Brief overview of the OSMF and installing the SWC

The Open Source Media Framework is useful both for its functionality and role in standardizing the development of multimedia experiences on the Flash Platform. This section briefly explains the goals and purpose of the OSMF and concludes with a walkthrough of configuring Flash CS4 to work with the OSMF classes. (Running time: 5:44)

Lesson 1: Basics of video playback with the OSMF

Step one is to play a video. In this lesson, you learn the three lines of code required to play and display a video with the OSMF MediaPlayer class. (Running time: 6:46)

Lesson 2: Handling changes in view state

The basic code to play a video with OSMF is a little too basic. To account for the latency that will occur when playing video online, you must understand how the media player indicates changes in viewability. In this lesson, you learn how to work with the MediaPlayerCapabilityChangeEvent.VIEWABLE_CHANGE event to handle connection latency. (Running time: 7:04)

Lesson 3: Adding a pause toggle button

To begin controlling playback of the MediaPlayer instance, the first control you will add to your video player is a pause toggle button. It's called a pause toggle button because it pauses the video if it is playing and resumes the video if it is paused. (Running time: 8:55)

Lesson 4: Sizing the video

By default, the MediaPlayer instance is sized to 320 × 240. But your video, like the one you are working with, might be a different size. In this lesson, you learn how to properly size your video display to match the exact dimensions of the video. When coding video players from scratch, you have to work with metadata events. The OSMF abstracts that capability somewhat, however, and so you can listen specifically for changes in known dimensions and respond by resizing the view property of your MediaPlayer instance. (Running time: 9:56)

Lesson 5: Adding a volume control

The OSMF makes volume control quite simple because of the single volume property of the MediaPlayer instance. In this lesson, you add a slider component instance to your stage and then apply the code to have it function as a volume control on your playing video. Note that this volume control will specifically control the volume of the playing video, and not of any other sound you might have playing in your Flash SWF file. (Running time: 5:56)

Lesson 6: Adding a progress bar

Progress bars—a visual indication of the current point in the video, compared to the overall duration—are a common element in video player interfaces. In this lesson, you learn one way to build a progress bar, first by capturing the duration of the video when it becomes known with the DurationChangeEvent, and then updating the visual elements with the PlayheadChangeEvent. (Running time: 13:58)

Lesson 7: Adding seek functionality

Many progress bars are also interactive, allowing users to click and seek to a point in the video. In this lesson, you create a seek bar, applying the code to make your progress bar interactive and using those interactions to control seek() calls on the MediaPlayer instance. (Running time: 10:43)

Lesson 8: Cleaning up after a video

Thus far, you have focused on the playback controls. But your player also needs to respond to the end of a video. Here you will first want to ensure that all relevant event listeners are removed, so that you do not hear these events when you do not wish your player to respond to them. Second, you will want to prepare this code to play multiple videos, which requires cleaning up after each video playback is completed. (Running time: 8:26)

Lesson 9: Playing multiple videos

Right now, your video player plays a single video. While that makes for a decent introduction to the OSMF, it's not a very flexible video player. But because you have already coded your player to clean up nicely after a video is completed, you can make your video player much more flexible—capable of playing any video. In this lesson, you alter the existing code slightly and add two buttons to your stage to allow your player to play multiple videos. (Running time: 11:05)

Where to go from here

For more information about the OMSF, visit the Open Sourse Media Framework website. To learn more about working with video players, explore the sample projects and templates in the Video Technology Center.