code.johnpolacek.com

Online Video

Currently, the best way to embed video on a webpage that will work across most browsers and devices is to use a combination of flash and html5. Embed a flash-based player with swfobject, and present html5 video as the alternate content. VideoObject (vidobject.swf) is a flash player that I’ve created that is open source and available for free commercial and non-commercial use.


Video Format

There are cross-browser non-flash video embedding methods out there, but they require you to create and serve multiple encoded versions of your video. This method enables you to deliver video in a single fomat (baseline h.264 mp4). Follow Apple’s specs for Mobile Safari compatibility. This format will also work for flash, so creating multiple formats is not necessary.

Poster Image

To create a poster image for the video, make it the first frame. (The poster attribute for the html5 video tag isn't supported by Apple until at least iPhone SDK 4.0)

Basic VideoObject Embedding

A VideoObject embed with no custom parameters set:

Download Video: mp4

Embedding Options

Video Size - To embed videos of different sizes, simply set the correct width/height values on the object and video embed tags.

Player Color - To change the colors of the flash player chrome, set FlashVars backgroundColor and buttonColor values.

Google Analytics Tracking - Add google analytics tracking by setting the FlashVars tracking parameter to true, and adding some javascript at the bottom of the html document. View this page’s source to see how this is done on the example below). Note: use the standard method of installing analytics on an html page via a javascript code snippet placed at the bottom of the page.

Download Video: mp4