EMBEDDING MEDIA ON A WEB PAGE
Back to Streaming Tutorials ...
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, Firefox 1.0.7-2.0.1, Netscape 8.0-8.1 and Opera 8.52 -9.10. 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. But ...... read on.
Important Notice
Due to a recent update (May 2006) in the way Microsoft IE handles the object and embed tags, a very annoying phenomenon is occurring.
- The area occupied by the object will be encased in a focus rectangle when hovering over it.
- Any controls present will not be active until after a first click in the area encased in the focus rectangle. The user gets a message "Click to activate this control".
This affects all types of embedded objects: Macromedia Flash, Windows Media Player, Real Player, Quicktime, Java applets, etc. At present only MSIE and Opera display this very annoying behaviour.
Several workarounds have 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. My hope was that MS would wake up and provide the proper solution themselves. Which they did ... in usual incomprehensible manner.
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 have obtained a copy of a similar script that can handle Windows Media Player.
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 ...
