Windows Media Player Javascript Detect and Embed

Geoff Stearns over at deconcept.com wrote a great script to detect and embed Flash objects, called SWFObject embed. What I love about it is that it is really simple to use and bypasses the problems of the Eolas v Microsoft debarcle (Click to activate this control). He also produced a Quicktime detect and embed alongside the Flash SWFObject that is also very useful. I needed a similar script for Windows Media Players, so without being able to find a great example, I knocked this up, based on his code.
First we create the WMPObject:

  WMPObject = function(mov, id, w, h) {  this.mov = mov;  this.id = id;  this.width = w;  this.height = h;  this.redirect = "";  this.sq = document.location.search.split("?")[1] || "";  this.altTxt = "This content requires the Microsoft Windows Media Plugin. <a href='http://www.microsoft.com/windows/windowsmedia/download/'>Download Windows Media Player</a>.";  this.bypassTxt = "<p>Already have Windows Media Player? <a href='?detectwmp=false&"+ this.sq +"'>Click here.</a></p>";  this.params = new Object();  this.doDetect = getQueryParamValue('detectwmp'); } 
Then deal with any parameters that are passed:
 WMPObject.prototype.addParam = function(name, value) {  this.params[name] = value; }  WMPObject.prototype.getParams = function() {  return this.params; }  WMPObject.prototype.getParam = function(name) {  return this.params[name]; }  WMPObject.prototype.getParamTags = function() {    var paramTags = "";  for (var param in this.getParams()) {   paramTags += '<param name="' + param + '" value="' + this.getParam(param) + '" />';  }    if (paramTags == "") {   paramTags = null;  }    return paramTags; } 
We then have a function to generate the core HTML and return a string of HTML code:
 WMPObject.prototype.getHTML = function() {   var wmpHTML = "";  if (navigator.plugins &amp;&amp; navigator.plugins.length) { // not ie   wmpHTML += '<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="' + this.mov + '" width="' + this.width + '" height="' + this.height + '" id="' + this.id + '"';
for (var param in this.getParams()) {
wmpHTML += ' ' + param + '="' + this.getParam(param) + '"';
}
wmpHTML += '></embed>'; } else { // pc ie wmpHTML += '<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="' + this.width + '" height="' + this.height + '" id="' + this.id + '">'; this.addParam("src", this.mov); if (this.getParamTags() != null) { wmpHTML += this.getParamTags(); } wmpHTML += '</object>'; } return wmpHTML; }
And deal with attributes:
 WMPObject.prototype.getVariablePairs = function() {   var variablePairs = new Array();   for (var name in this.getVariables()) {   variablePairs.push(name + "=" + escape(this.getVariable(name)));  }   if (variablePairs.length &gt; 0) {   return variablePairs.join("&amp;");  }  else {   return null;  } } 
Write the generated HTML out to the page:
 WMPObject.prototype.write = function(elementId) {  if(isWMPInstalled() || this.doDetect=='false') {   if (elementId) {    document.getElementById(elementId).innerHTML = this.getHTML();   } else {    document.write(this.getHTML());   }  } else {   if (this.redirect != "") {    document.location.replace(this.redirect);   } else {    if (elementId) {     document.getElementById(elementId).innerHTML = this.altTxt +""+ this.bypassTxt;    } else {     document.write(this.altTxt +""+ this.bypassTxt);    }   }  } } 
And deal with plugin detection:
 function isWMPInstalled() {   var wmpInstalled = false;  wmpObj = false;   if (navigator.plugins &amp;&amp; navigator.plugins.length) {   for (var i=0; i &lt; navigator.plugins.length; i++ ) {     var plugin = navigator.plugins[i];    if (plugin.name.indexOf("Windows Media Player") &gt; -1) {     wmpInstalled = true;    }   }  } else {   execScript('on error resume next: wmpObj = IsObject(CreateObject("MediaPlayer.MediaPlayer.1"))','VBScript');   wmpInstalled = wmpObj;  }    return wmpInstalled;  }  /* get value of querystring param */ function getQueryParamValue(param) {   var q = document.location.search;  var detectIndex = q.indexOf(param);  var endIndex = (q.indexOf("&amp;", detectIndex) != -1) ? q.indexOf("&amp;", detectIndex) : q.length;   if(q.length &gt; 1 &amp;&amp; detectIndex != -1) {   return q.substring(q.indexOf("=", detectIndex)+1, endIndex);  } else {   return "";  } } 
Then to use the WMPObject, you can use the following:
 <div id="MyContainer"> Loading product demonstration video... </div>  <script type="text/javascript">
var vo = new WMPObject("wmpMovie.wmv", "myMovie", "380", "285");
vo.addParam("AutoPlay", "False");
vo.addParam("ShowStatusBar", "True");
vo.write("MyContainer");
</script>
Download a fully functional demo of this code from Box.net.

Ben Powell

Ben Powell was born in Wales and after living in several European countries is now resident in Germany. He is a frequent blogger, software developer and a social techie.

You may also like...

7 Responses

  1. Great,
    Could you please post the zip file?

  2. Ben says:

    I have created a zip file with the Javascript include file only. There is no demo, but at some point I’ll warp it all together.

    If you follow the instructions for the Quicktime example that Geoff Stearns has created and switch the references in your HTML code for the wmpObject instead, you shouldn’t go far wrong.

    The file can be found here: http://www.box.net/shared/3ddpad6hw0

    Geoff’s information on the Quicktime Object detect and embed is here: http://blog.deconcept.com/2005/01/26/web-standards-compliant-javascript-quicktime-detect-and-embed/

  3. nopeahopea says:

    Excellent work.

    Unfortunately, a huge problem remains: when scaling embedded video, firefox (and other non-IE pc browsers) tend to not scale the video height when user has WMP 11 installed. This doesn’t have anything to do with the script though. The problem relies on the general plugin implementation.

    For example, let’s say you wanted to scale up a 320×240 video to 640×480 – the video width is expanded to 640px but the height remains at 240px.

    Have you guys come around this problem?

  4. Ben says:

    You could try adding the following parameter:

    A Google search turned this up, but I haven’t tried it out.

  5. levani says:

    Hi,
    Thanks for this effort.
    I hope you dont mind, I have created YUI component using your script,
    http://kenai.com/projects/yuimediaplayer/pages/Home
    I have retained parameters management and browser Detection code.
    wiki has credit link to this page.
    I was not sure what license it was under, but I will put credints inside source code as well once I document it.
    Regards
    Levan

  6. Anonymous says:

    Hi Ben,
    Using your isWMPInstalled() when testing on my system it will return two instances of WMP, one for the full WMP and one for the Firefox WMP Plugin which I’ve also installed. You don’t know how to check for just the plugin do you? I’m wanting FF users to see wmp visualization as music plays but this will only work with wmp plugin installed.

  7. Ben says:

    Hi Anon. I’m afraid I haven’t looked at this project for about 3 years. How about using the jQuery Media Plugin: http://plugins.jquery.com/project/jlembed

Feel free to leave constructive comments that aren't spam!

%d bloggers like this: