| |
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!
|
|
|