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

  • Flash video plays in your browser
  • You need the flash plugin to watch flash video
  • Flash video comes in ".flv files"

How that works

  • The flash video player is just a little embedded app, like flash games and flash ads. They're all just pieces of flash content embedded in a webpage, exactly the same.

  • The flash video player app, like what's used on youtube et al., is a little bit special. The video content isn't stored in the app, but it's downloaded and presented when you run the app.
  • How does the player app know how to get the video? The URL of the actual file is passed to the flash player app via the webpage as a parameter.
  • So, the video file is separate from the player app.

Details of the player app

  • Every streaming video service seems to have their own player app
  • They might look a bit different, and behave differently (they all have their own annoying quirks), but they all do the same thing: Get a video file, decode it, and play it into your browser window. They may have options to move around the timeline, control the volume, go fullscreen, etc.
  • Some player apps can be had for free, some are commercial pay-ware
  • You embed the app in your webpage, then the app is then downloaded like a normal piece of page content (eg. playerapp.swf)
  • Different apps may have different ways of downloading the video file, I'll refer to this as delivery later on

  • N.B. This is a change from the pre-youtube days, when the flv video file was actually embedded in the SWF player app; you had to download the whole SWF file before playback would start

Details of the video file

  • .flv is not a codec, it is a container (much like AVI) - you put video and audio streams inside the container
  • You can use different codecs inside a FLV file. What you use will be dictated by the codecs your flash player app supports
  • H.263 and VP6 are popular options
  • Newer versions of The Adobe Flash Player apparently support H.264 video and HE-AAC audio codecs (higher quality, better compression, more CPU-intensive)
  • More details: http://en.wikipedia.org/wiki/Flash_Video

Delivery

  • The easiest way to do this is via HTTP! This has the advantage of using technologies you're already familiar with, and needs zero effort to implement
  • Playback can start immediately; you receive and buffer enough video to start playback, then keep downloading the stream in the background
  • This has some limitations, however. HTTP was designed for start-to-end file delivery, so it's not ideal for jumping around in the video, and can't support real-time broadcasts
    • This can be approximated with HTTP's partial download feature (probably more commonly known as "resume" support) - ie. you can request an arbitrary range of bytes from a file. All servers can do this nowadays
  • This isn't without limitations. Due to the way video compression works, you can only jump to "keyframes" in the video stream. This means the player needs special metadata about the byte-positions of the keyframes in the stream, and the flash player app needs to know how to use that metadata
    • The "higher class" and commercial player apps usually do this
  • This is fine for most usage, but for the best user experience you want a protocol that natively supports streaming concepts, like gracefully handling dropped packets, and the ability to seek through the file more readily.
  • This is where a dedicated "streaming protocol" comes in, such as RTMP, RTP, and a whole lot of other acronyms
  • Streaming protocols are just a different (optimised) way to get chunks of data from the server to the player. It still does the same thing as HTTP
  • Streaming protocols don't require that all packets are received in sequence, if at all - that's a feature of HTTP that's not desirable in this situation. This makes them much more resilient in the face of network problems, like lossy or jittery links.
  • Streaming protocols usually need special software; Apache can't do this by default. Examples:
  • Most of these servers are commercial pay-ware, but remember there's no One True Way to do it that makes one better than the others. They just serve up .flv files over a special protocol. Which one you choose will probably be a balance between cost, ease-of-use and featureset.
  • When serving the .flv files by HTTP, users are able to download the whole file easily. When using a streaming protocol, this is non-trivial. Whether you think this is a good or bad thing is up to you

Trying out embedded flash video for yourself

You will need:

  • A webpage to embed the video into, you don't necessarily need a webserver to test it out
  • An flv file to play
  • A flash player app to embed
  • A browser with the flash plugin installed - if you can use youtube then you're all set to go

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:

  • -i is the input file
  • -vcodec specifies the video codec to use
  • -ar is the audio sampling rate, in Hz
  • -y says to overwrite the output file if it already exists
  • -aspect specifies the intended display aspect ratio of the video
  • -qmin is the minimum video quantiser (used for VBR video encoding) - a lower number is higher quality
  • -qmax is the maximum video quantiser (used for VBR video encoding) - a higher number is lower quality
  • In case it's not evident, we're using -qmin and -qmax to specify a range of acceptable quantisers

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