Many people, myself included love the ease of using youtube, or viddler. I prefer viddler to youtube because of the higher quality. I recently went looking for even higher quality, and I wanted to avoid the user leaving my site by clicking the video again. I was unable to find anything to my satisfaction, so I decided to look into doing it all myself.
There are three basic steps to putting video on your website:
1. Encoding
2. Uploading and hosting
3. Embedding
Here are the detailed instructions for each step: (this is for flash video, I will write instructions for high def later)
Encoding:
I use Visual Hub (high setting at 500×376) on OSX to convert an avi file taken directly from my camera to flash. I then save the file as “xxx.flv”. Visual Hub will convert most any format to flash, so this was a good choice for me. If you are a windows user, then this is the only step that you will have to find a different solution. I am sure there are several apps out there that will encode flash, google can probably help.
Hosting:
I then upload the video file to my website in a folder labeled “video-flash”, and a jpg thumbnail to a folder named “video-posters”. The jpg can be any image sized to the same size of the video (I use 500×376). I just grab a frame from the video itself, and use that. I use VLC to grab the frame, and save it as a jpg. The jpg step is necessary only if you don’t want a black frame to show while your video is not playing. The photo serves as a thumbnail preview of your video. I would recommend checking the limits of your bandwidth with the web hosting company you are using before serving video, because this can shut your site down fast if you don’t have an unlimited plan.
Embedding:
I am sure there are many wordpress solutions, but I chose JW flv media player. Just download the zip file, and upload the *.swf file and the *.js file to your website in whatever folder you want. I am using /blog. Once you have all the files uploaded, then use the following code in your page: (be sure to enter your own variables)
<embed src="http://www.yourwebsite/mediaplayer.swf" width="500" height="396" allowscriptaccess="always" allowfullscreen="true" flashvars="file=http://your-video-file.flv&height=396&width=500&image=http://your-image-poster.jpg&volume=100"></embed>
Note that I added 20 pixels to the height to allow for the player at the bottom. You will see what I am talking about when you try it without adding 20 pixels
Much of the settings can be customized, so have fun playing with it. You can see the settings I chose above, so feel free to choose whatever fits your needs.
Topics covered:
embed video in blog
embed video in wordpress
embed video on your website
Tags:
Embedding,
encode,
Encoding,
high def,
OSX,
viddler,
video,
video flash,
video posters,
VLC,
YouTube
Related posts
