HOWTO: Convert Videos to Flash Video (.flv) and Play On Your Site

| No TrackBacks
Want to convert a Microsoft Video Stream (mms://) (or any video) into a .flv (Flash Video file) that can be played on your site using a Flash video player (like YouTube)?  Well, you can using several freely available, open-source tools.  The process in a nutshell is as follows: rip the Microsoft video stream (mms://) from the streaming video source using mplayer.  Then, convert it to an .flv (Flash Video) using ffmpeg.  The .flv is played back using the open-source FlowPlayer.  As an optional step, you can load FlowPlayer in the browser using the SWFObject library from Google Code.  Continue reading for the details HOWTO.  Note you'll need a Linux box with ffmpeg and mplayer installed.
For a few sample videos, see the FlowPlayer documentation.  Here's how to do it:

  1. Rip the mms:// video stream using mplayer.  This saves the streaming video to a file on your computer:

    mplayer -dumpstream mms://streaming.server.example.com/stream.wmv -dumpfile stream.wmv

    Note that in some cases, when you try to "save" a video stream using your browser, you'll be saving a .asx file which is an Advanced Stream Redirector.  If you get a .asx file from the server you're trying to save the video stream from, no problem.  You can simply open the .asx file using notepad or vi to see what mms://*.wmv video stream the .asx file is pointing to.  The video stream inside of the .asx file is one you want to rip using mplayer.

  2. Convert the .wmv file to a .flv (Flash video) using ffmpeg:

    ffmpeg -sameq -i stream.wmv stream.flv

    Note that you can also covert the Flash video to another video format if you ever wanted to go the other way:

    ffmpeg -sameq -i myOtherVideo.flv newVideo.wmv

  3. At this point, you'll have stream.flv which is the actual Flash video to be played with FlowPlayer.  Download the latest free FlowPlayer from their download site.  Once you have FlowPlayer downloaded, you'll want to extract the ZIP file and locate the .swf player files.  They'll probably look something like this:

    flowplayer-3.0.0-rc2.swf
    flowplayer.controls-3.0.0-beta5.swf


  4. Place these .swf files in a location on your web-server where they can be read by a browser.  Now, download the SWFObject Library from Google Code.  Extract the SWFObject ZIP file you just downloaded, and locate the swfobject.js file in the extracted directory.  Place this file in a location on your web-server where they can be read by a browser:

    mv swfobject.js /video-player

  5. Now, let's put it all together using HTML.  Here's a sample HTML file (/video-player/index.html) that uses FlowPlayer and SWFObject as described above:

    <html>
    <head>
    <script type="text/javascript" src="swfobject.js"></script>
    </head>
    <body>
    <div id="player"></div>
    <script type="text/javascript">
    swfobject.embedSWF("flowplayer-3.0.0-rc2.swf", "player", "400", "300", "9.0.0", null, { config: "{'clip': 'stream.flv' }}" });
    </script>
    </body>
    </html>

So, let's talk about what's going on here.  In the HEAD of the HTML doc, you're sourcing the swfobject.js library.  In the body, we've created a DIV that has an ID of "player".  This DIV defines where FlowPlayer will be loaded by SWFObject.  Next we have the SCRIPT that actually embeds an SWFObject object, set's a few variables for FlowPlayer, and then writes FlowPlayer into the "player" DIV.

Note that the SCRIPT call has to follow the DIV.  If you place the SCRIPT in the HEAD of the document (or somewhere else before the DIV), you'll get an error because SWFObject will try to load FlowPlayer into the "player" DIV before that DIV is available in the browser's DOM tree.

Almost all of the FlowPlayer "config" variables can be tweaked.  For a list of these FlowPlayer options, check out FlowPlayer's Documentation.  The FlowPlayer site also provides documentation on how to use SWFObject if you want to read the official docs.

Did You Find this Helpful?

Did you find this post helpful, or at least, interesting?

  

About Mark

A Silicon Valley native, Mark Kolich is a full-time Software Engineer and a consultant for hire. A web technologies expert, his current focus is on building powerful and robust cloud-driven web-applications using Java, PHP, Perl, AJAX, DHTML, CSS, and JavaScript. His favorite programming languages are PHP, Java and JavaScript. He uses Linux, enjoys biking to work, loves building great software, and always writes elegant, readable, and maintainable code.

No TrackBacks

No trackbacks attached to this entry.

Twitter (@markkolich)

Translate

About this Entry

This page contains a single entry by Mark Kolich published on November 8, 2008 1:13 PM.

Google AJAX Libraries API (googleapis.com Hosts Your Favorite Library) was the previous entry in this blog.

NFPA 704: The "Fire Diamond", What do the colors actually mean? is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.