Top
fr
We Design & Host Your Place on the Web
WARNING: Obsolete technology kept for historical reasons.

EMBEDDING MEDIA ON A WEB PAGE

Back to Streaming Tutorials ...

More FAQ ...

Introduction

I remember the first time I wanted to add audio to a web page I only found 2 ways to do it: using BGSOUND in the body tag of a page, which is really old and deprecated besides not affording any flexibility or control, or using EMBED which only works in IE and generates a validation error. The workaround was to use both an object tag and an embed tag inside the object tag. In the object tag one referenced the Activex component which would play that media type. While this works just fine in all major browsers, it doesn't validate at all, thereby prompting strong proponents of the W3C to regard embedded media as an abomination.

It is my opinion that audio/vidual media can very much be a part of a web page and blend into the design and functionality to add a different dimension for a richer experience.

I will explain here by example the proper way to embed media meant to be played by Windows Media Player (audio or video) and flash media so that it both validates AND works in all (or most) browsers. I'll have to say most browsers, because in truth I only know for a fact that this method works properly in Internet Explorer 6-7-8, Firefox 1-2-3, Opera 8-9-10 and Chrome. The big bonus is that it is W3C compliant, so this will be valid code. The other bonus is that you can style this pretty much as you like.

The method is very simple and was first proposed under the name Satay Flash and later adapted to other types of embedded objects. This involves using only the object tag.

Important Notice

An update in May 2006 in the way Microsoft IE6 handled the object and embed tags brought about a very annoying phenomenon which required an additional click to activate the control (for any type of embedded object: Macromedia Flash, Windows Media Player, Real Player, Quicktime, Java applets, PDF files).

This problem has been corrected subsequently by MS, but the methods described here remain valid.

Several workarounds had been proposed, all of which I found unacceptable due to their very high complexity of implementation and the fact that they only work in javascript - plus all catered only to Flash.

Some of the current solutions are provided at: http://www.amarasoftware.com/flash-problem.htm, http://activecontent.blogspot.com/ and http://blog.deconcept.com/swfobject/. The last one works well with my Flash objects and was easy enough to understand, and after contacting the developer I obtained a copy of a similar script that can handle Windows Media Player and a similar one for Quicktime.

So without much ado, here are the code snippets that work in all browsers, based on the Satay Flash method. In addition, for each method described I will also provide the best workaround using the scripts from www.deconcept.com, all of which are based on the SWFObject method.

Back to Streaming Tutorials ...

Ads



WARNING: Obsolete technology kept for historical reasons.