Wiki

Serving streaming flash video

This article will be a quick and dirty, high-level overview of how to embed flash video on your website, and how it all works. I'll assume you're somewhat familiar with encoding and handling video files, and have a basic level of HTML and Javascript knowledge. I won't cover the finer points like setting up your webserver, or transcoding your video files - this is also assumed knowledge.

Concepts

"Flash video" is not really that special. It's not magic, it's not scary.

The easy stuff

How that works

Details of the player app

Details of the video file

Delivery

Trying out embedded flash video for yourself

You will need:

Making a FLV file

I used FFmpeg, it's free video encoding and playback software. I'll assume you have a little experience encoding video, this is one invocation that worked for me:

ffmpeg -i input.avi -vcodec flv -ar 44100 -y -aspect 1.7777 -qmin 2 -qmax 8 output.flv

This is pretty self-explanatory:

There are also free converters available for Windows. Once done, you should have a .flv file that's ready to use

Choosing a flash player app

There's a few free offerings, I've personally tried "OS FLV" and "Flowplayer".

I like Flowplayer much more, it feels a lot more polished and the UI is just a bit nicer. I've not tried it, but the interface is scriptable with Javascript, which is a boon for very dynamic pages that might want to do this.

There are plenty of others on offer, here are two commercial-looking options:

Making the page

This is really easy. Most players have some helper libraries to do the hard work (eg. a function call from PHP), but for our purposes, I made a really simple HTML page to illustrate what's happening.

This is based on the sample code that comes with Flowplayer, but I stripped out the inter-page linkage in their examples to keep it clean. For more discussion of embedding options, visit http://flowplayer.org/demos/installation/alternate/index.html

<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <!-- flowplayer JavaScript file that does Flash embedding and provides the Flowplayer API. -->
        <script type="text/javascript" src="flowplayer-3.1.1.min.js"></script>
        
        <!-- some minimal styling, can be removed -->
        <link rel="stylesheet" type="text/css" href="style.css">
        
        <title>Minimal Flowplayer setup</title>
</head>
<body>
        <div id="page">
                <h1>Minimal Flowplayer example</h1>
        
                <!-- this "A" tag is where your Flowplayer will be placed. it can be anywhere -->
                <a  
                         href="knkclip.flv"  
                         style="display:block;width:640px;height:360px"  
                         id="player"> 
                </a> 
        
                <!-- this will install flowplayer into the previous "A" tag. -->
                <script>
                        flowplayer("player", "flowplayer-3.1.1.swf");
                </script>
        </div>
</body>
</html>

Flowplayer's documentation suggests that if you're not running the example off a webserver, you will need to edit your Flash security settings for things to work.

  1. http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html

  2. Select "Edit locations" > "Add location" > "Browse for files" and select the flowplayer-x.x.x.swf file you're using

Go ahead and try it, this should Just Work for you.


Author

Barney Desmond is a Linux systems administrator at Anchor who enjoys playing with new technologies and has a passion for free software and open source solutions. Anchor is a provider of Australian web hosting and dedicated servers.

References/External Links

Wiki: dedicated/Serving-streaming-flash-video (last edited 2011-06-16 12:44:10 by BarneyDesmond)