Adding Media Players to Web Pages
How to Embed a MP3 or Video Player in HTML Code without Flash
A technique that is supported by all modern platforms for playing media in a web page, without using Flash or other scripted technologies, and using simple HTML objects.
Most modern browser platforms include a built-in media player. In Windows, this is the venerable Media Player. However, forcing website visitors to download and then play audio and video in their players is a little cumbersome. The obvious solution is to embed the media in the web page, but this can be tricky, often requiring custom plug-ins and advanced Flash objects.
On the other hand, why not just embed the default media player in the web page, via the browser?
Embedding Native Media Player in Web Page
The aim is to embed the media player that is present on the visitors machine, and then tell it to play the segment of audio or video. It will then begin to play using an application such as QuickTime or Windows Media Player -- inside the web page!
<object width="300" height="42">
<param name="src" value="my_music.mp3">
<embed src="my_music.mp3" width="300" height="42" ></embed>
</object>
There is no need for the casual reader to understand the above. All that it does is embed the media in the page, and then wrap that in an object that is understood by all browsers. Using both embed and object means that it is necessary to specify the parameters twice, but also makes sure that all platforms can process the media.
This is largely historical. The embed tag was never fully assimilated into the HTML standard, and subsequently was only ever implemented as an extension to regular HTML processing by major browsers. The official HTML way to embed in this fashion is to use the object tag, with the same parameters, but spread over several lines.
Given that browsers tend to ignore (upon the instructions of teh W3C) tags that they do not understand, the overlapping of object and embed ought not to present a problem - those that support object tags will view the embed as an ignorable (invalid) parameter, and those that do not will just ignore it and pick up the embed version instead.
Of course, there is one drawback in that the parameters for the embedding must be repeated for each variant of the HTML code.
A final note: if the page owner wishes to allow the visitor to save the MP3 (or video) file on their own machine, then it is necessary to also provide the URL to the visitor, along with instructions on how to do so. For example, PC users (Windows) will have to right-click and select 'Save as...' from the resulting drop-down menu.
Caveats
Some web hosts will not allow streaming of audio or video content. This means that the above will not work, and that the only recourse would appear to be to just allow visitors to download and not play the content.
However, there is another solution : many file hosts will only charge a small amount for the storage of media files. There are even free file hosts set up just to provide this function. A simple web search for "free file host +streaming", for example, will yield plenty of resources.
Refinements
For the JavaScript programmers, there are three interesting refinements to the above:
- Detect the browser version and then insert appropriate code;
- Use JavaScript to autofill the parameters in each object;
- Create an HTML div and use it to show/hide the player.
All of these will make for a better end user experience.
