Nicolas Prof has developed an open source, flexible and customizable video player based on the latest sprint (0.8) of the Open Source Media Framework (formerly codenamed Strobe). It supports both progressive and streaming. Because it’s built on the OSMF framework, you can expand the functionality and add plug-ins from the framework into this player.

A quick test of the PROFMediaPlayer

I thought I’d take it for a spin, so I downloaded the source and opened up the project folder. There’s no readme, so, like everything else with OSMF right now, it takes a bit of feeling around to get started.

There is a FLA with customizable assets in the Library. That seemed like a good place to start. (Nicolas has also included a layered Photoshop PSD file that you can use to edit the skin assets which was a nice addition.)

To customize the player size, background color, source video, etc. you can use flashvars or assign the values in the code, in the EmbedPlayer class. (e.g. settings.url=”myVideo.flv”).

I found that the PROFMediaPlayer really gives you a good starting point with OSMF, rather than starting from a blank class file and figuring it all out on your own. You can download the code at the link below; let me know if you think it’s helpful in exploring OSMF:

PROFMediaPlayer | Nicolas Prof blog

Thanks to everyone who attended my session yesterday morning at Flash on the Beach in Brighton, UK. As promised, here are all of the sample files, along with the presentation for your reference. I wish I’d had more time to show you the coolness of the DVR and Dynamic Streaming in all their glory, but I present them to you here to play with at your leisure. If you have any questions you didn’t get to ask, please post here and we can have a virtual Q&A

FMS_fotb09_preso.pdf

Dynamic Streaming and DVR code examples

Enjoy the rest of FOTB!

I’ve had several questions recently about how to add closed captioning to the Dynamic Playlist code in my tutorial on Adobe Developer Connection. I answered a comment on the article, but its not easy to find — so I thought I’d post it here to make it a bit easier.

Yes, this is pretty easy to implement, but is a bit nitpicky. Here’s how you do it.

Just add the URLs of the timed text files to the XML data for each video, like so:
<vid desc=”Popeye for President, Title and Credits”
src=”videos/Popeye_forPresiden256K_flash_popeye.mp4″
thumb=”thumbs/Popeye_forPresiden768K.jpg”
ttURL=”myTTfile.xml” />

Then, in the initMediaPlayer function, you’d just add it as an additional attribute (ttURL) in the ‘for’ loop so it can be loaded for each video as it’s clicked, like this:
tileList.addItem({label:item.attribute(“desc”).toXMLString(),
data:item.attribute(“src”).toXMLString(),
ttURL:item.attribute(“ttURL”).toXMLString(),
source:thumb});

Add these three new lines of code at the end of the initVideoPlayer function:
myVid.autoRewind = true;
myVidCaptioning.source = tileList.selectedItem.ttURL;
myVidCaptioning.flvPlayback = myVid;

And finally, replace the listListener event handler with the following:
function listListener(event:Event):void {
myVid.stop();
myVidCaptioning.source = event.target.selectedItem.ttURL;
myVidCaptioning.showCaptions = false;
myVidCaptioning.showCaptions = true;
myVid.autoPlay = true;
myVid.play(event.target.selectedItem.data);
}
The trick here is to hide then show the captions, so you clear out the data from the previously-selected video. It’s a bother, but this should take care of it.
Then, go into your FLA and drop an FLVCaptioning component onto the Stage, and give it an instance name of myVidCaptioning. Publish, and watch (and read) your videos.

Hope this helps… if you have any trouble…

… download the example code here (video files omitted; you can grab them from the original tutorial files or change the XML to point to your own).

Another option, of course, is to insert embedded cuepoints into your video files for your captions, then use the onCuePoint event handler and display them in a dynamic text box. This is a more custom approach, but the timed text file approach above conforms more to usability standards. Your call.

I just wrapped up a live breeze session with the Adobe Flash Media Server online user group. It was a lively session with lots of questions and a great turnout. The recording and sample files are posted. Here are some links:

http://groups.adobe.com/posts/7d8b9e44f8

Also, you can join the online FMS user group here:

http://www.tinyurl.com/adobefmsug/

YouTube’s Flash API are written in AS2, so if you have an AS3 project and want to use their players, it can get pretty tricky.

Matthew Richmond of The Chopping Block (and fellow FlashCodersNY member) has generously created and shared his ActionScript 3 wrapper for the YouTube chromeless player.

Matt has taken the time to not only give us an AS3 wrapper, but to write a comprehensive tutorial as well. Check it out:

http://code.google.com/apis/youtube/articles/youtube_as3_chromeless.html

Thanks, Matt!

This will likely be my last Flash411 episode for awhile, and it’s pretty meaty. I talk about the basic principles of encoding and show off the new video encoder that ships with Flash CS4 in this episode, which just posted this week:

[ For a full-size version, visit Adobe.TV ]

And if you’d like to download the encoded samples, you can find them here:
http://www.flashconnections.com/flash411/flash411_ep4_examples/

I’ve squeezed in a couple of more episodes of Flash 411 (the baby’s coming soon!)… Here’s episode 3, which posted last week:

[ For a full-size version, visit Adobe.TV ]

And if you’d like to download the examples, you can find them here:
http://www.flashconnections.com/flash411/flash411_ep3_examples/encore_playlist.zip
http://www.flashconnections.com/flash411/flash411_ep3_examples/flash%20video%20player.zip
http://www.flashconnections.com/flash411/flash411_ep3_examples/dreamweaver.zip

The illustrious and always-illuminating Tom Green has a great little video tutorial about getting Flash HD video onto your site, on LayersMagazine.com. Check it out:

HD Video in Flash Professional CS3

The long-in-coming second episode of Flash411 has just aired on AdobeTV. I talk about what FMS is, how to get started, show you how you can broadcast live with Flash Media Live Encoder (in *about* a minute!) and walk you through a basic 2-way videoconference application.

Here are the source files for the show, so you can follow along with the example:

–> flash411_ep2_examples.zip <–

Enjoy!

[10/9/08**NOTE: AdobeTV keeps moving videos around (grrrrr), so if the link above does not work, try a search for "Flash 411" or Larson or FMS to find the show.]

Thanks to everyone who attended my session today, “Custom Video Players for Videophobes”. As promised, here are the slides, source files, and links.

–> Presentation [PDF] <--

--> Source files [ZIP] <--

The pre-built video players I mentioned are:

• FLVPlayer PRO component http://www.flashloaded.com/flashcomponents/flvplayerpro/
• JW FLV Media Player http://jeroenwijering.com/?item=JW_FLV_Player
• flowplayer http://www.flowplayer.org

Be sure to check out the Adobe Developer Connection for additional tutorials and tools for Flash Video.

If you missed this year’s Flashbelt, be sure to mark your calendar for next year! This is truly the conference not to be missed… great networking, fantastic speakers, laid-back vibe. Dave, you’ve done it again! Midwest is the best