Using movies on a web page

So you recorded those first steps of your youngest, your first public milonga performance, uncle Tom falling backwards into that cake, or auntie Janet dressed like a man. Now you want to show into to the world. You save the movie into a .WMV (Windows Media – Video), .RM (Real Media), .MOV (Quicktime), .MPG or .MP4 (MPEG-2 or MPEG-4) , .SWF (Shockwave/Flash) or .AVI (Microsoft Video for Windows) file, sprinkled some Sorenson or DivX magic on it (if you’re not familiar with these terms, don’t worry. It’s another topic alltogether), upload it to your web server, and then what? What is the best way to present it to your visitors?

ANCHOR tag – a plain link</p>
Works: everywhere
Description: Provide just a link to the movie file, and count on the user’s browser to figure out which application it should give the URL to. WMV files will generally open in Windows Media Player, MOV files in Quicktime, but there is no way to be sure what AVI and MPG files will open in. This depends on the client’s configuration. An additional disadvantage is that a lot of browsers will first download the whole file and only then play it, so you lose the quasi-immediate start of a streaming experience.


EMBED tag</p>

: Works: everywhere
Description: even if it is not part of the HTML specification, it should work everywhere. It can be as minimal as <embed src="">, but also allows the specifying of size, mime-type and player controls. It does not allow you to specify what program (and what version) should be used to play it. It’s again the user’s (browser) configuration that decides.


OBJECT tag</p>

: Works: everywhere
Description: this is the official way to do it (according to the HTML specs). You create an <OBJECT> ... </OBJECT> pair with a bunch of PARAM in between. Here is the way to do it with Windows Media Player, RealPlayer, QuickTime and Shockwave/Flash. A very common practice is to combine the EMBED with OBJECT, like in the example below.


IMG with dynsrc</p>

: Works: only in Internet Explorer (Windows)
Description: very easy to use, but poorly supported. Allows for combining the classic SRC with the DYNSRC property, so that even if the browser does not show the movie, it can still show an image.



: Works: everywhere (if it’s done right)
Description: if you’re a bit handy, you can create a wrapper page for your streaming media. I use my Cinema Tool to show movies. I just input the URL, the format and the size, and the rest is automatic. On podcasts like Traxsource, I use a special audio-only player page (not yet generally available) that shows the playlist (a web page) within the media player (SMIL for Real & QuickTime/ASX for WMV).



: Works: everywhere (but watch out for Javascript scripts like Adsense/counter pages – they can give errors in frames)
Description: If you don’t want to send your visitors to a new or a popup page, consider inserting a IFRAME into your page. You can then even trigger new movies by just adding a link with the right TARGET. Remark: if you add a link like described in the ANCHOR example above, even with the right TARGET specified, the file will probably open outside of the browser, and not in the IFRAME where you want it. Webmastering shouldn’t be THAT easy!

Also see: fluffbucket.comComparison of media players


💬 media💬 webdev