How To Make Your Own Basic Internet TV Video Player & Webpage

As a follow-on to my previous post, here’s how you can create your own integrated Video Player and Webpage in a few easy steps using Dreamweaver. This works with just about any relatively recent version, but the screencaps below were taken in Dreamweaver CS5.

First, you need a video file encoded to a Flash-compatible format (FLV or F4V) which can be output from just about any Adobe authoring tool, including Premiere Pro and After Effects, or by taking an existing video file and encoding it with the Adobe Media Encoder.

Next, launch Dreamweaver and create a new HTML document. Type any old text you want, just to have some content on your page, and then select Insert > Media > FLV… (important note: the actual menu verbage may vary slightly, depending on which version of DW you’re using, but with a little poking around you’ll find it).

dw_insert_media.jpg

And then you get the dialog. The first menu is the only one that needs explanation, and that explanation warrants a separate post which will come shortly. For now, all you need to know is keep it set to it’s default, which is Progressive Download.

Insert_FLV.jpg

The rest of the dialog is pretty self-explanatory. Browse to your FLV video file, select a player Skin (there are a few stock skins but you can also create your own using the Flash Professional authoring tool), set the size of the player, etc. Then, you’ve got a Webpage in DW with a big grey box on it, representing the placement of your Video Player.

DW_player_inserted.jpg

And lastly, to view your new creation, select File > Preview in Browser.

look_at_my_video.jpg

So at this point, in order to make this live on the Internet, you would copy the HTML file, the FLV file, and the 2 SWF files that were created in the same folder as your HTML file when you inserted the FLV file onto the Webpage in the steps above. The first file will be called FLVPlayer_Progressive.swf, and (name of the skin you selected).swf. These 2 SWF files are the actual player component and the skinning of the player, respectively. Dreamweaver created this files for you when you inserted the video. The key is to remember to upload them when you publish the video, the Video Player, and the Webpage to your website.