I posted four new OSMF recipes on Adobe's cookbook site this afternoon, and thought you might care to see 'em:

Playing Multiple Pieces of Media, Consecutively, with the OSMF ParallelElement
Playing Multiple Pieces of Media, Concurrently, with the OSMF ParallelElement
Dynamic Streaming with OSMF
HTTP Streaming in OSMF

And, as a reminder along these lines, I'm teaching this year at MAX, as a MAX Master, on 'Designing Custom Video Players with OSMF' (you can browse the catalog of talks and presentations and then you can register here).

Share and enjoy!

-r

As you may know, OSMF 1.0 has been release, so one of the first tasks I set for myself was to test the code I wrote in April for OSMF 0.95 (which I posted, along with the screencasts of my talk at FITC, here). And, lo and behold, all of them worked!

Well, all except one. The final demo file, the Full Sample Player was playing, but the video was invisible and all the controls were disabled. So I set out to figure out why. (For those who don't want to read to the end, you can download the updated project file, for Flash CS5, here.)

It wasn't long before I found the culprit. It turns out that the MediaPlayer in OSMF now dispatches the 'ready' MediaPlayerStateChangeEvent when the video is ready to play for the first time — not just when it's ready to play again. So, the result of my last code sample, with OSMF 1.0, was to hide the video and disable the controls — at the start of the video playback! Not what I wanted.

So, if we just remove lines 157 and 158 (seen below), from the _onMediaPlayerStateChange function, the player will work.

case "ready":
	_disableControls ( ) ;
	_cleanUpVideo ( ) ;
	break;

But now, when our video ends, the video doesn't get reset (or 'cleaned up' or however you want to say it) — it looks ugly and doesn't behave how we would expect (because we just removed the code that's supposed to clean up these videos).

So, how do we clean up at the end of a video? Well, you can now listen for the TimeEvent.COMPLETE event on the MediaPlayer instance — when it's fired, the playback of your media is done.

So, if we add this line to the _setupOSMF() function:

_mediaPlayer.addEventListener ( TimeEvent.COMPLETE , _onComplete , false , 0 , true ) ;

…and then declare the _onComplete function, adding back in those two lines we removed from the _onMediaPlayerStateChange function:

private function _onComplete ( evt : TimeEvent ) : void
{
	_disableControls ( ) ;
	_cleanUpVideo ( ) ;
}

One final note… Adobe added in string constants for all of the MediaPlayerStateChangeEvent types, grouped in the new MediaPlayerState class. So instead of comparing against the string, "ready", you can now compare against the string constant of MediaPlayerState.READY. All of them are listed here and have been included in the updated source files that accompany this post.

See you in October at MAX in LA!

And, as always, share and enjoy!

-r

On Wednesday, June 9th, Adobe will be hosting a FREE 90-minute session, run by Lisa Larson-Kelley, on the formal launch of the 1.0 version of the Adobe Open Source Media Framework (OSMF). Lisa will also cover the beta release of "Strobe Media Playback," a pre-compiled SWF media player (including source code) based on OSMF.

The invitation is here and you may register here.

[blockquote]In this session, Lisa Larson-Kelley will introduce you to the fundamentals of Open Source Media Framework (OSMF), Adobe’s standard video player libraries for building playback experiences and monetizing video on the web. She’ll give you a high-level overview of why you’d want to use OSMF and what it can do, and then dive into its underlying structure and some simple sample code to get you started. This session is for beginner to intermediate programmers and web developers who want to gain a better understanding of OSMF, and how it can simplify media player development.[/blockquote]

Share and enjoy!

-r

So I edited it down a bit (cutting out the Q&A, which unfortunately was not audible on my microphone), chopped the sections down into individual videos, and posted them to YouTube. I thought it might be a good reference if I embedded all of them in a single post, along with the source code you'll want for each lesson if you wish to follow along in Flash CS4 or CS5.

In this talk, I cover:
- what is OSMF
- OSMF capabilities
- The basic structure of an OSMF player, including the MediaElement, MediaPlayer and MediaComposition
- Dynamic Streaming (the files for that video also include HTTP Streaming)
- Subclipping
- The key MediaPlayer properties and events required to build a media player

The talk and these files all use OSMF 0.9 from Sprint 10, which you can download here.

The Slides

Part 1: Overview of Adobe OSMF

Part 2: Getting Started with OSMF in Adobe Flash

download the files to accompany this video

Part 3: Dynamic Streaming with Adobe OSMF

download the files to accompany this video

Part 4: Composite Elements in Adobe OSMF

download the files to accompany this video

Part 5: Subclipping

download the files to accompany this video

Part 6: Key MediaPlayer Properties And Events in OSMF

download the files to accompany this video

Last time I checked (February), OSMF was in Sprint 9 (and I updated my sample files at that time, posted here). Now, it's in Sprint 10, specifically version 0.93. And Adobe appears to have done a lot to lock down the API, which is definitely an exciting and positive development.

But, of course, there are some significant changes since the Sprint 9 OSMF framework — so even the files I posted just two months ago are no longer valid. So, since I wrote it as one of the sample files for my talk, I figured I would post the code to run dynamic streaming with OSMF v0.93.

Here is a Flash CS4 document class, assuming you already have your OSMF SWC in your library path.

package 
{ 
    import flash.display.Sprite; 
 
	import org.osmf.media.MediaPlayer;
	import org.osmf.containers.MediaContainer;
	import org.osmf.media.URLResource;
	import org.osmf.net.NetLoader;
	import org.osmf.elements.VideoElement;
	import org.osmf.utils.URL;
	import org.osmf.net.DynamicStreamingResource ;
	import org.osmf.net.DynamicStreamingItem ;
 
    public class MyPlayer extends Sprite 
    { 
 
		private const RTMP_URL : String = "rtmp://myhost" ;
 
        public function MyPlayer() 
        { 
			player = new MediaPlayer ( ) ;
			container = new MediaContainer ( ) ;
			addChild ( container ) ;
			//set the player to play videos only once by default
			player.autoRewind=false;
			var resource : DynamicStreamingResource = new DynamicStreamingResource ( RTMP_URL ) ;
			var vector : Vector.<DynamicStreamingItem> = new Vector.<DynamicStreamingItem> ( 3 ) ;
			vector [ 0 ] = new DynamicStreamingItem ( "myMovie_high" , 1500 ) ; 
			vector [ 1 ] = new DynamicStreamingItem ( "myMovie_low" , 400 ) ; 
			vector [ 2 ] = new DynamicStreamingItem ( "myMovie_medium" , 600 ) ; 
			resource.streamItems = vector ;
			videoElement = new VideoElement( resource ) ;
			player.media = videoElement ;
			container.addMediaElement ( videoElement ) ;
        } 
 
		private var player:MediaPlayer;
		private var container:MediaContainer;
		private var videoElement : VideoElement ;
 
    } 
}

Share and enjoy!

-r

Unfortunately, even those courses are relatively new, the code in them no longer works, because OSMF has advanced a few sprints. We're now at OSMF sprint 9, and the framework continues to shift quite a bit.

Because there are almost no examples on the web of using OSMF with Flash (as opposed to Flex), and I've had several people email me asking if I had time to update the code.

And, so, finally I did. At least for the progressive player. So you can download the Flash CS4 source code to build an OSMF player with the Sprint 9 framework from the article on Building progressive video players in Flash with OSMF.

Share and enjoy!

It's 35 minutes across five lessons and takes you through the process of converting the progressive OSMF video player (which we create in the first installment of this course on Building Progressive Video Players with Adobe OSMF, into a dynamic multi-bitrate streaming player. Multi-bitrate streaming occurs when you program your Flash to deliver the highest quality video a viewer can see (dependent on their bandwidth). *Dynamic* multi-bitrate streaming is similar, with the additional feature of having your player constantly meters the bandwidth throughout viewing, to adjust the playback between multiple videos seamlessly, as the viewer's bandwidth may fluctuate.

Please note: that the first course on progressive video players was built with OSMF Sprint 5. The second course on streaming with OSMF was built with OSMF Sprint 7. I spend the first lesson of the new course updating the progressive player to work with Sprint 7, and I wrote a few notes about the major differences between OSMF 0.5 and 0.7 in a post on my personal blog last month. Also note that, by the time the course was published by Adobe, OSMF had already moved forward to Spring 8.

When I wrote the first course on building a progressive video player with OSMF, I was struck by two things:
1) OSMF is clean — really clean — and it just works well in ways that the AS3 video API does not — for instance, with OSMF setting volume is a matter of talking to the volume property of the MediaPlayer
2) OSMF felt like a bit of overkill — you need a lot of imports and classes (a MediaPlayer, a MediaElement, a NetLoader and a URLResource) just to build the simplest of progressive video players — that would be simple enough, requiring seven lines of code with raw AS3 if you knew it

But, I had a hunch that #2 above was due to the fact that I was using approximately 0.05% of this powerful framework — like trying to use a nuclear bomb when a shovel would do just fine.

Well, when I started learning how to write the code to build dynamic multi-bitrate streaming player, I quickly learned that my hunch was right. The benefits of OSMF really kick in once you do anything beyond the most basic video player.

In the case of streaming, to convert your progressive OSMF video player to a streaming OSMF video player, all you do is change the URL! Seriously, that's it. OSMF is smart enough to know that when you try to load a video from an RTMP server, you're trying to stream — and it takes care of the rest.

That was pretty neat. But the benefits really kicked in when I beefed my regular streaming OSMF video player to one that supports dynamic multi-bitrate streaming. All it took was just a few extra lines of code to turn my regular video player into one that supports dynamic multi-bitrate streaming. If you want to learn those lines of code, I'd recommend checking out the course.

As I say, I'm still just barely cracking the surface of OSMF, and I'm really looking forward to digging deeper into its support for layouts, playlists and monetization. But, even with this second course, the massive time, workflow and standardization features of OSMF are already revealing themselves.

Share and enjoy!

-r

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

• Introduction: Brief Overview of OSMF and Installing the SWC ( 5:44 )
• Lesson 1 : Basics of Video Playback with OSMF ( 6:46 )
• Lesson 2 : Handling Changes in View State ( 7:04 )
• Lesson 3: Adding a Pause Toggle Button ( 8:55 )
• Lesson 4: Sizing the Video ( 9:56 )
• Lesson 5: Adding Volume Control ( 5:56 )
• Lesson 6: Adding a Progress Bar ( 13:58 )
• Lesson 7: Adding Seek Functionality ( 10:43 )
• Lesson 8: Cleaning Up After a Video ( 8:26 )
• Lesson 9 : Playing Multiple Videos ( 11:05 )