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

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

For my example, I used the tiger SVG file that I always see in SVG posts to create some vector art in Illustrator. After opening the SVG I simply saved it as an FXG 2.0 file using the Save As menu. In the FXG options I just used the default options.

After saving the FXG file, I placed the file in my src folders in a Flex 4 project in Flash Builder 4. I made a skins package to drop the file in.

Once you drop your FXG file into your project, using the file is a breeze. Just write the tag in!

It really is as simple as that. Using this method you can use these FXG files very easily in any of your Spark skins. Here's the rendered FXG:

Once you have your fxg graphics rendering, you can manipulate the object using width, height, alpha, etc and the graphics will scale as you'd expect from vector graphics.

Download Flash Builder 4 project file here: Example Source

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

If you have suggestions for enhancements or more bug fixes please do report them at http://zamfbrowser.riaforge.com  If you don't want to sign up for RIAForge just send me an email to omar@almerblank.com, I'd really like to hear your suggestions and bug reports!

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

I plan on adding some AS3 service class export functionality next for Flash and Flex applications. The other big feature I want to add soon is strong type support, to test and see strongly typed objects.

On my server if you directly hit the http://www.zamfbrowser.org/zamf_demo/gateway.php file, the file downloads.  I believe it has something to do with the AMF response header and the server settings.  I'm just not certain on that  yet.  The gateway does work with an AMF client though.  Also, if you have a gateway named something like this:  http://www.server.com/api/index.php, you can use http://www.server.com/api/, but if you leave out the trailing slash the browser does not load the gateway properly.  I'm trying to track that issue down.

Hopefully this is as helpful to some as it's been for me in the first couple of days! =)