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 && 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 > 0) {
  return variablePairs.join("&");
 }
 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 && navigator.plugins.length) {
  for (var i=0; i < navigator.plugins.length; i++ ) {

   var plugin = navigator.plugins[i];
   if (plugin.name.indexOf("Windows Media Player") > -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("&", detectIndex) != -1) ? q.indexOf("&", detectIndex) : q.length;

 if(q.length > 1 && 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.