To play audio or video files on a web page consistently across all the browsers, you will want to use a Flash media player. Adobe Flash is the most widely supported application on the web for playing audio and video files. As we mentioned early in the course, Flash is also commonly used to do animation on the web.
There are a variety of Flash media players available online, some free, some not. One of the most common, and easiest to use, is the freely available JW FLV Media Player. The nice thing about the JW FLV Media Player, and other players of its ilk, is that you can relatively easily skin it to make it fit the design of your site.
The bare bones approach
Note: While the following is the simplest way to put a Flash application on your page, and it is worth understanding, it is not the recommended approach. Skip below for the recommended approach.
To place any Flash application on your web page using simple XHTML, you will need to use either the <object> tag, or the <embed> tags in XHTML. Historically, the <object> tag was used for Internet Explorer, and the embed tag was used for the other browsers. However, these days, <embed> is not considered to be valid XHTML, and it is no longer recommended for use. However, most modern browsers continue to support it.
The FLV Media Player apploication we will be using to play media files can be put on a page using the following embed code:
<embed src="mediaplayer.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" wmode="transparent" flashvars="file=http%3A%2F%2Fwww.mos.org%2Fmedia%2Faudio%2F081121MOS_CSTPodcastTMGrapheneDDEelsX.mp3%3Ffile_extension%3D.mp3&autostart=false&repeat=false&showdigits=true&showfsbutton=false" width="100%" height="20" />
The “src” attribute tells the embed tag where to locate the flash media player file. Obviously, you need to make sure you have a copy of mediaplayer.swf in your own directories in order for this to work.
We then pass a parameter to this media player that indicates which media file it should play. The path to this media file goes inside the “flashvars” attribute. Notice that in this example, in the “flashvars” attribute, we are telling the media player to load a media file from another server. We could just as easily load a media file on our own server using a relative path instead of an absolute path. Also notice that the path to the media file is urlencoded.
To see this example in action on our server, click here.
The recommended approach
This example is the same as the first example above, but it uses the Javascript SWFObject.js library to put the Flash player on the page instead of using the <embed> tag. The SWFObject.js library is just a bit of code that creates the embed tag in Javascript and then places it on the page without you having to write it in XHTML. You’re probably wondering why you would want to use it…
This page gives a good overview of the two methods, the problems with the XHTML version, and the reasons for using the Javascript version rather than the XHTML version.
The code requires that you have downloaded the swfobject.js script, and have put it in a subfolder called “scripts” on your server. Once you have the file uploaded, you can included it into your XHTML file in the head of the document:
<head> ...the usual stuff in the head <script type="text/javascript" src="scripts/swfobject.js"></script> </head>
Once that’s taken care of, you put the JW FLV Media Player onto your page using this example code:
<script type="text/javascript">
var so = new SWFObject('mediaplayer.swf','mpl','100%','20','9');
so.addParam('flashvars','file=http%3A%2F%2Fwww.mos.org%2Fmedia%2Faudio%2F081121MOS_CSTPodcastTMGrapheneDDEelsX.mp3&autostart=true');
so.write('flashplayer');
</script>
Notice that the parameters are basically the same as we saw in the <embed> example: the location of the Flash application file, the width and height of the application, and the location of the media file that we want the media player to play. The difference, of course, is that these parameters are specified in Javascript.
PS: In case you didn’t notice, these parameters are obviously arguments being sent to the constructor function of an object in Javascript, similar to how we used constructor functions in object-oriented PHP.
No related posts.