Willus.com Home   |   Archive   |   About  

YouTube Envy: How to Stream Videos from your own Web Site
Encoding and embedding .flv files, July 25, 2009

  
  THE MAGIC FILE: YTPlayer.swf
I had long been wanting to stream videos from my own web server that are as easy for people to play as the ones on YouTube. Once I found the YouTube Player from FLV hosting.com, I had the critical piece of the puzzle. Unfortunately FLV hosting's pages are a bit confusing. Don't click on the "YouTube Player" box or go to the ytubeplayerHD link. The version that works the best is this one. In fact, all you really need is one file: YTPlayer.swf (local copy--right click it and select "Save link as ..."). It's a small file (30 kiB) which you need to place in the same folder where you keep your html files which have embedded videos. If you have these files in multiple folders, you'll need multiple copies of this file, but it hardly takes up any room. This player plays most (all?) file types that YouTube can play, i.e. flv files that are either encoded with native FLV video or H.264 video. Many thanks to FLV hosting for this great player!

HTML EXAMPLE TO EMBED THE VIDEO
After getting YTPlayer.swf, you just need to convert your video to the .flv file format (see next section) and then create an HTML file to show the video.

  Here is an HTML example. The HTML source is below:


  <html><body bgcolor=#c0ffc0><center>
  <h1>Cat Food Burglar</h1>
  <font color=#008000 size=+2 face=arial><b>VIDEO</b></font><br>
  <table width=0 cellpadding=0 cellspacing=0 border=4 bordercolor=#008000><tr><td>
  <embed
	src="YTPlayer.swf"
	flashvars="movieName=cat_food_burglar.flv&autoStart=true"
	width=480
	height=390
	allowFullScreen=true
	type="application/x-shockwave-flash"
	pluginspage="http://get.adobe.com/flashplayer" />
  </td></tr></table>
  <br>
  <font size=+1>Hidden camera catches my dog swiping cat food.</font>
  <br><br>
  <font size=-1 face=arial><a href="cat_food_burglar.flv">Click here</a> if you prefer
  to download the video clip</b></a> (5.7 MiB .flv file, 625 kibps).</font><br>
  <font size=-1 face=arial color=black>If the video doesn't play, download and install
  <a href="http://get.adobe.com/flashplayer/">Adobe FlashPlayer</a>.
  </center></body></html>

The only files in the folder on the server are: index.html (listed above), YTPlayer.swf, and the .flv movie file, cat_food_burglar.flv.

CREATING THE .FLV FILE
There are any number of ways to convert (encode) your video files to .flv files which can be used by YTPlayer.swf:

1. Upload your video file to YouTube.com. YouTube will automatically convert just about any video format to a high-quality .flv file which you can then download and remove from their server.

2. I use FFMPEG, a command-line utility which will convert/scale/crop between many different video and audio formats. A Windows version and several GUI front ends of FFMPEG are available. If you are using the command line, this is the command I use to convert my hi-def Panasonic camera videos to .flv files:

  ffmpeg  -i input_video.mts -vcodec libx264 -r 24 -bufsize 240000000
          -s 640x360 -ab 56k -ar 22050 -b 500k -maxrate 600k output_video.flv

The above command converts input_video.mts (can be .avi or other type) to output_video.flv using h.264 encoding (-vcodec libx264) at 24 frames per second (-r 24) and a target bit rate of 500 kibps. The output video size is 640 x 360. You'll want to make sure the output video size matches the aspect ratio of your videos (mine are hi-def, so they are 16:9, but most standard def videos are 4:3, so you'd use -s 480x360). The -ab 56k and -ar 22050 set the audio so it will be compatible with YTPlayer.swf. FFMPEG has much more capability--it can crop your video, scale it, take a specific time slice, etc. For more about how to use FFMPEG, see the FFMPEG documentation page.

3. There are many other .flv encoders to convert your video files. Just google "flv encoding".

That's really all there is to it. Good luck and have fun!


 

This page last modified
Tuesday, 27-Oct-2009 23:30:50 MDT