How To Put Flash Videos On Your Blog In Many Easy Steps

I’ve been known to post adorable Flash videos of my son reading books and of the parodies I do of children’s shows. Perhaps you are asking, “How does he do it?” More likely you are asking “Why doesn’t he just post his videos to YouTube and be done with it?” In which case, hush, you.

Since the internet needs more how-to instruction pages, here’s how I do it. I used Windows, so don’t be surprised that the software I talk about uses Windows as well.

FLV? Wha?

FLV, or Flash video, is a file format that embeds video directly into Flash files, allowing Flash to do more than provide annoying website navigation and strange animations and games. Google Video uses it, as does YouTube. It has a lot of advantages over other methods of delivering video on the net. More people have Flash plugins than QuickTime, Windows Media, or Real Player. In addition, Flash is slightly less evil than the other three, killing only two puppies every time you use it as opposed to nuking baby seals from orbit and also selling your private information to spammers. (I’m looking at you, Real Player! But not too hard, lest you nuke me from orbit as well.)

To post your videos as FLVs on your blog or site, you need three things: original video, a tool to convert the video to FLV format, and a player to provide your FLV movie to visitors.

Getting Original Video

What, you don’t have a DV camcorder or something? Filming the boring mundanities of your life for posterity is an unalienable right. Get crackin’, and don’t come back here until you have three hours of birthday party footage, including young Suzie being frightened by the clown you hired.

Converting Videos to FLVs

Tools to convert video to FLV can run you from $50 to $700. Thankfully, there are free options. The command-line tool FFmpeg will do it for free, and it’s open source to boot. That means you can get it for most any platform. It also means that the documentation is terrible and it’s got a learning curve steep enough and high enough to carry you into orbit.

Enter the Riva FLV Encoder. It’s based on FFmpeg and it’s free. It’s also Windows-only. Such is life.

  • Grab a copy of the Riva FLV Encoder and install it.
  • Make a backup copy of your movie to work with. Riva FLV Encoder occasionally erases your original movie file. Better safe than sorry.
  • Run it. In the Input box, press the Browse button and navigate to the video you want to convert.
  • On the right side, set the video’s Resolution. I generally recommend a movie size of 320×240 — less if your video is of lower quality or doesn’t have a lot of fine detail.
  • Set the video’s Bitrate, which determines the video quality. For video with a lot of motion, you’ll want to set this reasonably high. I get good results with a bitrate of 360, though if you lower it, the final file’s size will be smaller.
  • If the audio in your original file is less than CD quality (i.e. 44100 Hz), try reducing the audio’s Bitrate and Sampling Rate. Lower values create lower-quality audio but a smaller final file size.
  • If you want to trim the boring bits off of the beginning and/or end of the video, enter when you want the movie to start (in seconds) in the Start Offset box and how long you want the movie to run in the Duration box.*
  • Press the Encode button.
  • Press the Preview button to make sure the video looks okay. If it doesn’t, try adjusting the bitrate or the Start Offset and Duration.

*I’ve run into a problem with trimming movies with Riva FLV Encoder: the sound isn’t in synch with the video any more. If that happens to you, you have two choices. One, trim the video in a video editor. Even Windows Movie Maker, which ships with Windows XP, will do. Two, turn the entire video into an FLV file with Riva FLV Encoder, then use a tool like flvtool2 to trim it. flvtool2 is a Windows command-line tool written in Ruby that does just about anything you want to FLV files. To use it to trim a movie:

  • Download the flvtools2 archive and put it in the directory where you keep your movies, to make your life easier. Unzip the flvtools2 archive and extract flvtools2.exe.
  • Open a command line window and go to the directory where your movies and flvtool2 are. If you’re not sure how to do this, you’re better off not using flvtool2 for now.
  • Open your new FLV file by double-clicking on it. This will load the FLV file in the Riva FLV player.
  • Play the FLV file to see where you want the final video to start and end. The Riva FLV player shows the time code in seconds on the bottom-right-hand side of the window. Write down the times for the video to start and end.
  • Type in the following command: flvtool2 -C -i [start] -o [end] [original flv name] [new flv name]. The bits in brackets are to be replaced as follows. [start] is when you want the video to start in milliseconds. So if you wanted the video to start at 1.231 seconds, type in 1231 where [start] is. [end] is where the video should end, also in milliseconds. Unlike Riva FLV Encoder, flvtools doesn’t use a relative measure of how long you want the video to be. [original flv name] is the file name of the FLV file you made with the Riva encoder, and [new flv name] is what you want the trimmed video to be called.

The encoded movie’s quality depends to a large extent on how good your source video is. If you’re using DV-encoded video, try scaling it down to an uncompressed 320×240 format before feeding it into Riva FLV Encoder, to reduce artifacts.

Playing the FLV On Your Site

Most people can’t play FLVs directly, as they would need to install an FLV player on their machine. Instead, you need to have a Flash application to serve the FLV file to visitors.

You could write your own in Flash, or pay someone for their FLV player. Alternatively, you can use Jeroen Wijering’s player, which he has made freely available for noncommercial use. Yay Creative Commons!

  • Download the FLV Player.
  • Put the flvplayer.swf file on your site. For example, mine lives at http://granades.com/flv/flvplayer.swf.
  • Upload your FLV file to your site.
  • To embed the FLV file in an HTML page or blog post, add the following HTML:
    <object type="application/x-shockwave-flash" width="[width]" height="[height+20]" wmode="transparent"
    data="/flv/flvplayer.swf?file=[movie]&autostart=false">
    <param name="movie" value="/flv/flvplayer.swf?file=[movie]&autostart=false" />
    <param name="wmode" value="transparent" />
    </object>

    /flv/flvplayer.swf is the relative URL to the flvplayer.swf file. [width] is the width of your FLV file (which I normally make to be 320) and [height+20] is the height of your FLV file plus 20 pixels. [movie] is where you uploaded your FLV file. &autostart=false means the visitor will have to click on the video before it plays — it’s optional, and may be left out if you want the video to play when the page is loaded.

That’s it! Give it a try. If you’re wanting to use this on a WordPress blog, you should try the FLV player plugin.

As to why I don’t post the videos to YouTube: because.

Share

30 Comments

  1. on September 14, 2006 at 10:13 am | Permalink

    As to why I don’t post the videos to YouTube: because.

    Because why?

    [I never did outgrow being a 3-year-old.]

    And hey, you’re paying the freight on the box, so … no worries here! 😉

    [I still can’t believe that you posted this HOWTO, though. Didn’t you learn anything from posting your image popup plugin and now being stuck with lots of support questions? :lol:]

  2. on September 14, 2006 at 11:39 am | Permalink

    The PodPress plugin I use for dragoncontv.com has a nice flash player as well. It plays FLV & a lot of “standard” video formats, plus there’s nifty plugin integration into WordPress.

    It’s probably overkill for embedding FLV on a website, but it’s perfect for podcasting wannabees 🙂

  3. on September 15, 2006 at 10:22 am | Permalink

    [I still can’t believe that you posted this HOWTO, though. Didn’t you learn anything from posting your image popup plugin and now being stuck with lots of support questions? 😆 ]

    Ah, but there I’m having to support my software. Here, if something doesn’t work with the software, I have the luxury of saying, “Talk to the people who created it in the first place.”

  4. on September 15, 2006 at 1:02 pm | Permalink

    Ah, but there I’m having to support my software. Here, if something doesn’t work with the software, I have the luxury of saying, “Talk to the people who created it in the first place.”

    Oh, but you know people are going to ask how to upload the software you’re talking about. 😉

  5. on September 15, 2006 at 1:35 pm | Permalink

    Thanks for the instructions! Now if I ever need to do this, I’ll know where to turn! (Kind of like fixing the toilet… which I still haven’t done!)

  6. Sarah
    on October 11, 2006 at 3:23 pm | Permalink

    Cool, someone who knows how to use flvtool2. Speaking of getting stuck with support questions… I can’t resist. Can you tell us how to use it to put cue points in flv files too please? 🙂

  7. on October 12, 2006 at 1:11 pm | Permalink

    Sorry, Sarah, I can’t. I’ve never tried it because I haven’t needed to do it. I’ve strictly used flvtool2 as a video knife.

  8. FDKgenie
    on December 2, 2006 at 11:09 pm | Permalink

    Hey, can I use this instruction on yahoo blog 360 ?

  9. on April 21, 2007 at 10:20 pm | Permalink

    KeepV Flash Converter is a free and powerful utility software that converts Flash/FLV files – http://www.keepv.com/

  10. on April 22, 2007 at 12:50 pm | Permalink

    I hadn’t seen your software before for converting, so thanks for the pointer. There’s also Total Video Converter, which does bunches of conversions. vixy.net has an online converter for those who don’t want to install software to perform conversion.

  11. on May 30, 2007 at 3:42 am | Permalink

    Look…
    I like the way you write.. it’s cute.
    And I encourage you to continue..

    Anyway, thanks for the video tutorial..
    Great read.. hopefully, you haven’t been nuked already by real networks..:)

    Ciao,
    Australia

  12. on June 6, 2007 at 1:48 pm | Permalink

    I found that your embed code in the above tutorial seems to have incorrect html characters that have passed.
    I believe it should read…

    To embed the FLV file in an HTML page or blog post, add the following HTML:

  13. on June 6, 2007 at 1:49 pm | Permalink

    Well it wont let me post the code i guess, but the characters are incorrect above, just a heads up!

  14. on June 7, 2007 at 10:42 am | Permalink

    Whoops, sure enough. I’ve fixed it. Thanks for the heads up!

  15. Ron
    on September 4, 2007 at 10:40 am | Permalink

    Is there any way to get a bigger size of the flvplayer.swf?

  16. on September 7, 2007 at 8:50 am | Permalink

    Not that I know of.

  17. wandy
    on April 1, 2008 at 1:10 am | Permalink

    great help! By the way, how can i remove the “Click to activate and use this control” on FLV movies i have made? thanks again..

  18. on April 1, 2008 at 9:15 am | Permalink

    Hrm, I don’t really know.

  19. Dylan Dog
    on May 4, 2008 at 5:57 am | Permalink

    Is there a way to have the same FLV player.swf like Youtube? I think these SWF files are way too tiny, Youtube is larger and all buttons are better. I tried to download the SWF file from Youtube but it didn’t loaded on my website. Any clues?

  20. on May 4, 2008 at 10:51 am | Permalink

    Their player is probably locked to their domain, and so won’t work on yours or mine as-is.

  21. Dylan Dog
    on May 5, 2008 at 6:49 pm | Permalink

    Stephen, I figure that out, too. But I can’t find anywhere on the internet how should I edit the Jeroen’s skin to look like Youtube. Is there any software capable of doing this job? I tried using the software “Flash Decompiler Trillix”, but the only thing it does is to unzip a bunch of files called .FLA, .AS and other image stuff, but no variables to edit. So, I have not idea how may I build my own skin. 🙁 BTW, Youtube’s skin can be seen here: youtube.com/player2.swf

  22. on May 6, 2008 at 8:37 am | Permalink

    You’d have to reprogram it in Flash, which is beyond what I’m capable of doing.

  23. on October 20, 2008 at 9:12 pm | Permalink

    Here is my question. I am designing a website with some video, it will be for commercial use. Can someone please tell me what is another way I can use the flash player, without playing an arm and a leg. Or could someone tell me another way to put some good quality video on the site.

    Thanks
    RH

  24. on October 21, 2008 at 8:38 am | Permalink

    For commercial use, you’re undoubtedly going to have to pay for a player. I see Jeroen charges 30 euros for a commercial license for his player.

  25. catarina
    on April 10, 2009 at 6:02 pm | Permalink

    are you going to put this on your blog

  26. on September 9, 2009 at 8:14 am | Permalink

    Now everyone can include .flv files into their blog posts. Thanks to author and this great post.

  27. on September 23, 2009 at 6:23 am | Permalink

    Nice!

  28. Dennis
    on October 28, 2009 at 2:00 am | Permalink

    Nice to read your tips, great info.
    I just tried to download the Riva FLV encoder and believe I have followed all instructions, yet it fails.
    I have desk top icons BUT the program just fails to open, even from the start menu.
    My system is Win Xp with 1 gb RAM and plenty of HD space, 2 core Duo processor.

    I sent off a help request to Riva but have rec’d no reply – anyone got any tips or advice?
    Would appreciate any assistance, thanks Dennis

  29. on October 28, 2009 at 8:11 am | Permalink

    Sorry, I don’t really know what could be causing that. But if you figure it out, I’d appreciate a follow-up comment here.

  30. on April 7, 2010 at 8:45 pm | Permalink

    really thanx for plugins. i need it …

2 Trackbacks

  1. By Big Step « Live Granades on September 12, 2007 at 3:04 pm

    […] traffic we get, what with the aforementioned LOL addictions, the toilet disassembly and the flash video instruction guide. I’m just here for the kid commentary. And the photos, the shiny, shiny photos. So on one […]

  2. By Linking to Video File? | keyongtech on January 22, 2009 at 12:31 am

    […] video players on the web, have a look at this tutorial if you decide to go the Flash Movie way: http://granades.com/2006/09/14/how-t…ny-easy-steps/ There seems to be a nice link to a free Flash Video encoder which will transform your AVI’s here […]