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.

Warning

I love constructive and useful commentary. I hate spam. Before you consider leaving a spammy comment heed my warning. I will show no mercy.

7 thoughts on “Windows Media Player Javascript Detect and Embed


    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'twentytwelve_comment' not found or invalid function name in /home2/ben/public_html/wp-includes/comment-template.php on line 1711

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'twentytwelve_comment' not found or invalid function name in /home2/ben/public_html/wp-includes/comment-template.php on line 1711

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'twentytwelve_comment' not found or invalid function name in /home2/ben/public_html/wp-includes/comment-template.php on line 1711

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'twentytwelve_comment' not found or invalid function name in /home2/ben/public_html/wp-includes/comment-template.php on line 1711

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'twentytwelve_comment' not found or invalid function name in /home2/ben/public_html/wp-includes/comment-template.php on line 1711

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'twentytwelve_comment' not found or invalid function name in /home2/ben/public_html/wp-includes/comment-template.php on line 1711

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'twentytwelve_comment' not found or invalid function name in /home2/ben/public_html/wp-includes/comment-template.php on line 1711

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