Adding an "embedded" video to your site (meaning it looks like it's part of your site) can be easily accomplished using one of two basic methods - using a video sharing site's "embed" code or creating your own independent solution.
The advantages of this solution is that it is fast and easy to do and, most importantly, someone else is paying for the hosting and for the bandwidth costs of serving your video.
Essentially, all you do is upload your video to any one of the popular video sharing sites like YouTube, Veoh, Viddler, MetaCafe, or HowTo and they will provide you with a small snippet of "embed code." Give this code to your Webmaster and they will add it to your site (or you can easily do it yourself!) and viola! now your video that was playing on the video sharing site is now also fully playable from your site too.
Here's something to be aware of. Should your video become very popular naturally that means lots of people will be watching it meaning, in turn, that your bandwidth costs may increase depending upon the particulars of your contract with the company hosting your site and the video. Each time the video is watched the video file must be progessively downloaded to that person's computer, multiply that by hundreds or thousands of views a day and your hosting company may send you a large bandwidth bill. On the other hand, if you only have say ten or twenty views a day your bandwidth costs will most likely not be impacted. I actually host my own videos and have never been impacted. There are companies like LibSyn that offer very cheap video hosting and this would be another way to avoid the uncertainty of video bandwidth and hosting costs.
One other point about this method. You may not realize it but when you are watching a video online you are actually interacting with two separate files. The first is the video file itself and the second is the "player" - it's the player that actually allows you to view the video and to control it with play and pause buttons, volume sliders and so on. So when you embed a YouTube video into your site you are also getting the YouTube player which they, YouTube, has complete control over.
For instance, if the video sharing site's player inserts ad content into, over, before or after the video that's now going to happen when the video is watched on your site too!
This is the solution I use to present video on Crow Digital Media.com. It gives me a great deal of control, it's free and relatively easy to add to your site if you are comfortable with computers. Specifically I use the free "JW FLV Media Player" from http://www.longtailvideo.com should you want to try this yourself.
What this essentially entails is uploading a video "player" application to your site (quite often it's a Flash file), the video file you actually want played and a small handful other files. Lastly you add a short piece of new HTML and Javascript code to your site wherever you want the video to appear and upload the revised page to your site. That's it.
This can be quite a complicated topic but to get directly to the point I would select from one of two different formats - Flash Video (also known as .flv or FLV files) or H.264 which is a type of Mpeg-4 compression. YouTube, for instance, initially used Flash but over the last couple of years has switched over to the H.264 format. By the way, both FLV's and H.264 encoded videos can be presented online using the free JW FLV Media Player application.
Your video will likely need to be "transcoded" or "translated" into one of these two formats before you begin. How do you do that? The good news is that you don't need to purchase the entire Adobe Flash program just to do this conversion. For those of you on a Mac I suggest you look into a program called Visual Hub from a company called Techspansion. For less than $24 you get what they call "the universal video converter for Macintosh" and there's not alot to argue with in that statement...not only will it encode in Flash but it will also encode your source video to the the equally popular H.264 format.
VisualHub is no longer available from Techspansion - the developer has discontinued work on this application. It may be available from other Internet sites for download - I haven't had an opportunity to check. Certainly there are many other converter programs out there but VisualHub will be sorely missed by many.
If you are on a PC there are alternative video conversion programs but I don't have experience with any of them so I can't recommend one specifically to you. There is a popular program called FFmpeg that many people use but it is a command line tool meaning you probably won't be too comfortable with it if you need a simple drag and drop type of program.
Here's the very first things to do:
Creating a poster frame for your video gives it that added professional touch. Without it, what your site visitors will see is just a black box with a white arrow pointing to the right. It's not very attractive and, more importantly, it gives no indication of what your video actually contains. Therefore site visitors may not know or be motivated to click within the black box to start the video playing. I prefer instead to create a special title graphic (or a screen grab from the video itself), sized to the same dimensions as the video, that will show up instead of the black box.
Using Photoshop or a similar program, create a .JPG that is the same size as your video and name it something like posterframe.jpg. You'll be uploading that poster frame image to your site in an upcoming step.
Go to www.longtailvideo.com and download the latest version of the JW FLV Media Player to your desktop which right now is version 4.2. It comes as .zip file containing the following files:
You'll actually only be needing two of these files - player.swf and swfobject.js
In order to make these setup instructions easier we are going to upload both the video file you want played and the JW FLV Media player application (it's the file called "player.swf") to the same directory in your Web site structure. Basically I'm suggesting uploading these files to the same directory that contains the Web page where you want this video to be playable. However, if you plan on having videos playing in multiple, different areas of your site you should instead put the player application in one central location so that you don't have to upload the media player application multiple times to different directories of your site.
I think a good way to start is simply to explore the Wizard Setup page a bit. You'll see what it does is to allow you to select from some of the most common player configuration options and see how each choice impacts the look and functionality of your video player experience. Each choice also impacts the code section too. The configuration options are broken down into six categories (clicking on any of the links will expand them so that you can see the options hidden below)
As you make various choices you can click on the button labeled "Update Preview and Code" and the sample player will update to show how the player changes.
For the purposes of your initial exploration I suggest you skip the options under "Embed Parameters" and "File Parameters" (particularly "file") This way you can use the sample video provided. Once you are ready, however, to actually configure your player you'll will need to edit those options but don't worry, it's easy!
Once you are ready to configure the player experience you would like for your site, take the following recommended actions to create a basic playback experience.
It recently came to my attention that you should add 20 pixels to the height value so as to leave extra room for the player's control bar at the bottom. If you don't do this you may notice some slight upward "squishing" of the video image.
Make sure you read the the Step 6 note below in red talking about the linkfromdisplay variable, you will need to take an extra step to get the video player to actually link to the URL you specified
I just noticed what appears to be a bug in the setup wizard. The "link" functionality that allows you to link directly to a URL by clicking on the video, didn't work until I added the following line " so.addVariable('linkfromdisplay', 'true');" (without the quotes of course!) to the code the Wizard generated. Apparently they forgot to include this function in the wizard but you can manually type in this extra line of code yourself, adding it to the code already generated by the Setup Wizard.
In order to have more than one JW FLV Media Player actually appear on a single page you need to make sure that two lines in your code both use the same "Player ID" - at least that's what I would call it. The Player ID's must also be unique.
The first line is very near to the top has the text in it saying "this text will be replaced." Do you see it? It starts out with an angle bracket, then says div id ="player" The second line is almost all the way towards the bottom of the code and says: "so.write('player'); "
If, for example, I wanted to have two JW FLV Media players on my page on my second player I'd change the two lines I just mentioned to you to read div id ="player2" and "so.write('player2'); " If I needed a third player on my page I'd change the two mentions of player2 to read player3. It's really simple once you get the hang of it but if you don't follow these instructions it will cause you problems.
I followed my own instructions and if I did it correctly....then a short video should appear below....and TADA! it does. As soon as I have an opportunity I will create a video with screenshots covering all the steps contained in this brief tutorial.