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.

7 thoughts on “Windows Media Player Javascript Detect and Embed”

  1. 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/

  2. 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?

  3. 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.

Leave a Reply

Please do not spam. Everything is moderated and I have no patience for the slightest bits of spam. You will get Askimet blacklisted. No links that are trying to sell things allowed. Blogspam countries are IP banned.

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>