This shows the files that need to be uploaded to your webspace in order to make the embedded video work
I have acquired a “legacy” camcorder (a 5 year old Panasonic NV-DS65B) which shoots basic standard definition video (720×576) so it seemed like a good idea to figure out how to get “embedded” in a website.
I have used Youtube and Vimeo, but getting material online this way has its drawbacks.
One very annoying thing is that they insist on re-processing files once they have been uploaded and I’m not convinced this is always a good thing as each time a file is re processed there is bound to be an extra level of deterioration in quality. The quality from a basic consumer camcorder will never be particularly good but I’d rather not make it any worse than it need be!
Another drawback is that Vimeo will shrink my video down to 512×416 which is presumably so that it will fit conveniently in their player. They give the option to download the original 720×576 file I uploaded but this is extra hassle.
This shows the HTML code needed to make the flowplayer files work
Youtube is even worse in respect of shrinking my video as they reduce it to a tiny 450×360! It gets worse…..If I select “normal quality” in Youtube the file is reduced to a postage stamp sized 300×240.
An alternative to using a video hosting site is to use a free embedded player such as Flowplayer and to use the free webspace that often comes with a broadband package. Flowplayer is open source rather than freeware which which to me at least is an added bonus.
Originally I thought that you could “embed” a video file in a webpage simply by linking to it, but I then realised that the player needs to be embedded in the page in order to play the video in the page “youtube style”.
When you download flowplayer it will give you an example HTML page which you can then edit as you wish.
I have a added a screenshot of my html file. Please note that I have had to change the bit of HTLM which defines the size of the embedded player so that it displays at the correct size:
style=”display:block;width:720px;height:600px”
My camcorder file is 720×576 but I have had to allow an extra 24 pixels to allow for the Flowplayer control bar. Originally I used 576px in the HTML code but this had the effect of squashing my video by 24 pixels.
I was initially worried that I would need to install something on my ISP’s webserver, but luckily this is not required and you can just upload the flowplayer files to a folder and they will work fine.
What I have not yet figured out is how to embed the file in wordpress so here is a screenshot that links to the webpage:
Example embedded video - click to go to web page
The only bit that I have not yet described is converting the DV file from the camcorder to a format that will play on flowplayer. Flash video seems to be the “standard” for embedded video and a good program that will convert DV to FLV (flash video) is Avidemux. Please note that I used Kino to capture the DV file from my camcorder and I am running Ubuntu Intrepid.
One thing to note when using Kino is that it will need to be run as root to capture as normal users will not have access to the firewire port so hit Alt F2 and run gksudo kino. Also note that Kino will try and save the capture file in root’s home folder so choose a save location to somewhere else otherwise you will not be able to find the file as a normal user once you run avidemux!
Avidemux does not like “raw dv” or “type 1 dv” so choose “type 2″ dv in the capture settings. Once you have opened the captured AVI file in Avidemux you can save it using the AUTO > FLV settings, but it is well worth adding a deinterlace filter to remove those nasty horizontal lines that can spoil the look of the finished file. The “yadif” filter seems to work well.
One thing I did notice was the input source dropdown list acted a bit odd as it would say “Mic” but that setting might not have registered properly so changing it to something else then changing it back to “Mic” again seemed to make it register.
