The Open Source Media Framework is Adobe's community-centered approach to standardizing the way that media players—and, 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.

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.

Requirements

To follow along with these tutorials you will need to install the following software:

Flash CS4 Professional

• Try
• Buy

Sprint 5

• osmf_source_s5.zip (ZIP, 1.9 MB)

Note: This article assumes that you have Sprint 5 installed. If you are using a later version, please work with Sprint 5 for purposes of these tutorials. You can find out more about Sprint 5 on the OSMF download page.

Sample files:

• osmf_player.fla.zip (ZIP, 13.5 MB)

Prerequisite knowledge

This course is useful for two types of students who seek to get up to speed with OSMF:

• Low- to intermediate-level Flash ActionScript developers who are comfortable coding on the Timeline and want to learn the raw ActionScript, as well as the underlying concepts, required to work with OSMF
• Higher level coders using Flash or Adobe Flex who want a quick rundown of the core classes utilized when building an OSMF video player

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)

Launch introduction

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)

Launch Lesson 1

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)

Launch Lesson 2

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)

Launch Lesson 3

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)

Launch Lesson 4

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)

Launch Lesson 5

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)

Launch Lesson 6

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)

Launch Lesson 7

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)

Launch Lesson 8

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)

Launch Lesson 9

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.

About the author