How To Stream Video From Your Own Site

NOTE: These instructions will only work if you have your own website, and if your host allows streaming Flash; some hosts don’t. If you can host the streaming vid on your own website, you can embed it other places, such as blogs or journals.

This tutorial will show you how to create a Flash video file and give you several options for streaming:

• create an embeddable streaming video
• create a streaming video that can’t be embedded by other people
• stream a single video on your webpage
• stream multiple videos on your webpage

Parts of this tutorial were originally posted to rhoboat’s Dreamwidth; many thanks to rhoboat for her kind permission to use it!

Step 1: Convert your file to Flash

First you need to convert your video files to Flash video (.flv) format. Some video editing programs/suites may have a converter built-in that you can use; if you’re all set with doing the conversion, skip down to Step 2: Upload your video.

If your editing software doesn’t already convert to Flash, you can use a third-party program. There are paid programs out there for reasonable prices, but there are also some free or shareware options.

We’re listing one option each for Windows, Mac, and Linux to get you started, but there may be others you’ll like better if you look around. All of the listed options handle a variety of file formats.

• free option for Windows
• shareware option for Mac
• free option for Linux

Windows users

Windows users can download SUPER to convert videos to FLV. (You need to click through several pages to get to the download link, but the pages all have information on them that you might find helpful.)

Once you’ve installed SUPER, you’ll see something like this:

For a 16:9 streaming video file, try these settings:

• Output:
  • swf/flv (Flash)
  • Flash video codec
  • mp3 audio codec
• Video:
  • 640×360
  • 16:9
  • 25fps
  • 1056 kbps bitrate
  • Keep Hi Quality, Top Quality, and Stretch It checked
  • Uncheck 48K audio.
• Audio:
  • 22050 Sampling Freq
  • 2 Channels
  • 64 kbps bitrate

Jump to "playing with settings"

Mac users

Mac users can download ffmpegX; to use it, you’ll need to download several compilers, all linked on that page.

• The mpeg2enc binary link has to be control-clicked to work.
• You do not need to download FLVTool2; the base version will do the conversion.
• This is shareware, not freeware, but you can use it free.

Once you’ve installed ffmpegX and launched the program, you’ll see something like this:

For a 16:9 streaming video file, try these settings:

• Target format:
  • Ignore; these are presets, you want to customize instead
• Video tab:
  • 640×360
  • 16:9
  • NTSC 29.97fps
  • 1100 kbps bitrate
• Audio tab:
  • 22050 Sampling Freq
  • Stereo
  • 64 kbps bitrate
• Options tab:
  • High Quality

Jump to "playing with settings"

Linux users

Linux users can download WinFF to convert videos to FLV (works on Ubuntu, Debian, Redhat, Pascal/Lazarus; also works on Windows).

[screenshots and settings, coming soon!]

Playing with settings

The settings here help keep the file size down while still maintaining pretty good quality overall.

• Managing file size is a balancing act between overall quality and how much bandwidth you’re willing to use/how playable you want it to be for people on older, slower systems.
• Play around with the settings until you’re happy with the result.

Step 2: Upload your video

Once you’re happy with your Flash settings and have your .flv file, upload that to your own personal webspace, such as in a "stream" folder. The direct link to your video will be something like this: http:// www.YOURWEBSITE.com/stream/video.flv

Step 3: Install a flash player on your website

Next, you need a Flash player. For this tutorial, we’re using the JW FLV Player, which you can download for free at that link. The player options you choose will determine whether or not people can embed your vids.

• Allow people to embed your vids:
  • By default, the option for the "Viral" plugin is selected; "viral" here means "embeddable", and you should keep that selected if you want a player that will provide viewers with an embed code for your vid.
• Don’t allow embedding:
  • If you’d rather people didn’t embed your vid (e.g., to protect your bandwidth), deselect the "Viral" option to download the standard player.

Once you’ve downloaded the file, unzip it and upload all of those files into a folder (flvplayer) on your webspace. The direct link to the player should look something like this:

• http:// www.YOURWEBSITE.com/flvplayer/player-viral.swf  (embeddable player)
• http:// www.YOURWEBSITE.com/flvplayer/player.swf  (standard player)

Step 4: Embed your video

Lastly, you need the embedding code for posting your streaming video, on your website or elsewhere.

Generating the code for your website

For HTML codes for use on your own site you can use this setup wizard, which allows you to plug in your own parameters and preview the vid, so you can see how things look before you go live, and make any necessary adjustments. The wizard streams the vid from your site — you don’t need to upload it again.

• "Select an Example Setup"
  • Go with the default "flvplayer with a single video"

• "Change your Flashvars"
  • This is where you set up the player itself.
  • There are only four necessary fields:
    • source (the player on your website)
    • height (this needs to be 20 pixels more than the height of your video, to make room for the control bar on the bottom of the player)
    • width
    • file (your streaming video on your website)
  • Click on "Embed parameters". For a 640×360 vid, set them up like this:
    • Source: http: //www.YOURWEBSITE.com/flvplayer/player.swf (or […]/player-viral.swf, whichever you chose)
    • Height: 380 (Note: 360+20 pixels to make room for the control bar on the bottom)
    • Width: 640
  • Click on "File properties" and enter the location of your FLV file:
    • File: http: //www.YOURWEBSITE.com/stream/YOURFLV.flv
  • Click on "Update Preview & Code"to see how it looks
    • Your vid will appear under "Preview Your Player" and you’ll be able to play it.
    • If there are problems, adjust your parameters until it looks right.

Embed the video on your website

Once it looks good, copy/paste the generated code into your webpage’s HTML file where you want the vid to play. You’ll need to make a few tweaks to make it work.

• First, at the top of the code, the setup wizard should generate a line of code like this:

  <script type="text/javascript"
  
  src="/embed/swfobject.js"></script>

• Change the /embed to the folder you put your player in (/flvplayer) to get src="/flvplayer/swfobject.js".
  • If it just says src="/swfobject.js", insert /flvplayer
  • If you upload your page and don’t see a vid, you either forgot to change this or had a typo.
• If you want to have multiple vids on your page, you can either leave the line above each vid, or insert the correct line into your html head material and delete each instance in the individual vid codes, whichever you prefer.

• To embed a single video on a page:
  • Look for this line: <div id=’player’>This text will be replaced</div> (This may say either div id=’player’ or div id=’mediaspace’.)
  • Delete "This text will be replaced".
  • The full code for your embedded vid will look something like this:

    <script type='text/javascript' src='/flvplayer/swfobject.js'></script>
     
    <div id='player'></div>
    
     
    <script type='text/javascript'>
    var so = new SWFObject('http://YOURWEBSITE.com/flvplayer/player-viral.swf','mpl','640','380','9');
      so.addParam('allowfullscreen','true');
      so.addParam('allowscriptaccess','always');
      so.addParam('wmode','opaque');
      so.addVariable('file','http://YOURWEBSITE.com/stream/YOURVIDEO.flv');
      so.write('player');
    </script> 

• To embed multiple videos on the same page:
  • If you have more vids, or if you think you’ll want to add vids at a later date, you need to change a couple more things.
  • Look for this line at the top of the code: <div id=’player’>This text will be replaced</div> (This may say div id=’mediaspace’.)
  • Look for this line at the bottom of the code: so.write(‘player’) (This may say so.write(‘mediaspace’) — it will match the div id from the beginning of the code.)
  • Delete "This text will be replaced".
  • Rename ‘player’ (or ‘mediaspace’) in both instances to something unique and specific to each individual vid.
    • So, if you have three vids, "Wind Beneath My Wings", "Holding Out For a Hero", and "My Immortal", and you want to stream all three, you could set up the codes like this:

      <div id='wind'></div>
      
      [rest of code for first vid]
      so.write('wind')
      
      <div id='hero'></div>
      [rest of code for second vid]
      so.write('hero')
      
      <div id='immortal'></div>
      [rest of code for third vid]
      so.write('immortal')

  • When you’re done, the full code for an embedded vid will look something like this:

    <script type='text/javascript' src='/flvplayer/swfobject.js'></script>
     
    <div id='wind'></div>
    
     
    <script type='text/javascript'>
    var so = new SWFObject('http://YOURWEBSITE.com/flvplayer/player-viral.swf','mpl','640','380','9');
      so.addParam('allowfullscreen','true');
      so.addParam('allowscriptaccess','always');
      so.addParam('wmode','opaque');
      so.addVariable('file','http://YOURWEBSITE.com/stream/windwings.flv');
      so.write('wind');
    </script> 

Once you’ve finished tweaking the code, you can upload your page. Your vid should be embedded and playable.

Embedding elsewhere

• If you used the viral player:
  • To get an embed code to put somewhere else you can simply play and then pause your vid; the player will provide the embedding code.
• If you used the standalone player:
  • You can use sample code to start with, and adjust it to match your vid until it looks right.

Once you have your embed code, you can then insert on other sites as appropriate (e.g., on Blogger, simply paste the code into a post; on LiveJournal or its clones/forks, use the "Embed Media" option). Depending on the service you’re using, you may need a plug-in to work with streaming files (e.g., on WordPress you can use VodPod; on Joomla, you can use All Videos).

Default sample for a 16:9 video:

<embed width="448" allowfullscreen="true" allowscriptaccess="always" src="http://www.NAMEOFYOURSPACE.com/flvplayer/player.swf" flashvars="height=272&width=448&file=http://www.NAMEOFYOURSPACE.com/stream/video.flv&searchbar=false&showicons=false"height="272"></embed>

Default sample for a 4:3 video:

<embed height="360" width="448" flashvars="height=360&width=448&file=http://www.NAMEOFYOURSPACE.com/stream/video.flv&searchbar=false&showicons=false" allowfullscreen="true" allowscriptaccess="always" src="http://www.NAMEOFYOURSPACE.com/flvplayer/player.swf"></embed>

You can play with all the embedding code parameters for different colors and such, and you can even download pretty skins for your player — just upload them to the same folder as your JW FLV player, and insert that URL into the "skin" parameter.

You can also change the video frame size if you want.

• For example, if you want to fit your 640×360 video into a 500-pixel-wide blog post, you can simply set up a smaller player without having to re-export or re-convert your video.
• Test out different embedding heights and widths so that you don’t have black bars with your video.