title: Trying to get jQuery Media Plugin to work
body: <p>I am trying to get the demo of jquery media plugin to work. Once I can get the demo working, then I will be able to start replacing the parameters with data gathered from url parameters passed.</p>
  
  <p>But right now I am unable to get the demo to work locally on my pc.</p>
  
  <p><a href="http://jquery.malsup.com/media/video.html" rel="nofollow">http://jquery.malsup.com/media/video.html</a></p>
  
  <p>Above is the video demo of jquery media plugin. Then when I try to make my own version of it locally I am unable to get it working.</p>
  
  <p>Can you help identify any problems with the code?</p>
  
  <p><a href="http://pastebin.com/4GxaT7PX" rel="nofollow">http://pastebin.com/4GxaT7PX</a> </p>
  
  <p>Or since some of you asked for the actual code here it is:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
  &lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
  &lt;title&gt;Play Movie using jPlayer&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/style.css" /&gt;
  &lt;style type="text/css"&gt;
  a.media   { display: block; }
  div.media { font-size: small; margin: 25px; width: 100% !important }
  div.media div, div.iframe_caption { font-style: italic; color: #888; }
  #lr { border: 1px solid #eee; margin: auto }
  div.example { padding: 20px; margin: 15px 0px; background: #ffe; clear:left; border: 1px dashed #ccc; text-align: left }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://jquery.malsup.com/jquery.metadata.v2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://malsup.github.com/jquery.media.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/swfobject.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  $(document).ready(function(){
  
      // grab url parameters function
      $.extend({
        getUrlVars: function(){
          var vars = [], hash;
          var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&amp;');
          for(var i = 0; i &lt; hashes.length; i++)
          {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
          }
          return vars;
        },
        getUrlVar: function(name){
          return $.getUrlVars()[name];
        }
      });
  
      function getURLParameter(name) {
          return decodeURIComponent(
              (location.search.match(RegExp("[?|&amp;]"+name+'=(.+?)(&amp;|$)'))||[,null])[1]
          );  
      }
  
      // Get object of URL parameters
      var allVars = $.getUrlVars();
  
      // get all the passed parameters
      var title =  $.getUrlVar('title').replace(/[^a-z0-9\s]/gi, ' ').replace(/[_\s]/g, ' ');
      var year =  $.getUrlVar('year');
      var rated =  $.getUrlVar('rated');
      var genre =  $.getUrlVar('genre').replace(/[^a-z0-9\s]/gi, ' ').replace(/[_\s]/g, ' ');
      var director =  $.getUrlVar('director').replace(/[^a-z0-9\s]/gi, ' ').replace(/[_\s]/g, ' ');
      var writer =  $.getUrlVar('writer').replace(/[^a-z0-9\s]/gi, ' ').replace(/[_\s]/g, ' ');
      var actors =  $.getUrlVar('actor').replace(/[^a-z0-9\s]/gi, ' ').replace(/[_\s]/g, ' ');
      var plot =  $.getUrlVar('plot').replace(/[^a-z0-9\s]/gi, ' ').replace(/[_\s]/g, ' ');
      var imdbid =  $.getUrlVar('imdbid');
      var poster_src=getURLParameter('poster');
      var path=getURLParameter('path');
  
      // update content below
      my_title=title+' ('+year+')';
      $('#player-title').text(my_title);
      $('#director-text').html('&lt;b&gt;Director:&lt;/b&gt; '+director);
      $('#writer-text').html('&lt;b&gt;Writer:&lt;/b&gt; '+writer);
      $('#actors-text').html('&lt;b&gt;Actors:&lt;/b&gt; '+actors);
      $('#plot-text').html(plot);
      $("#poster_show").attr("src",poster_src);
  
      // clean up path
      path = decodeURIComponent(path);
  
      // create player stuff
      // $('.media').html('&lt;a href="'+path+'" class="media"&gt;Watch my movie!&lt;/a&gt;');
      // $('#video').media( { width: 400, height: 300, autoplay: true } ); 
  
  });
  //]]&gt;
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id='player' style="clear:both;background-color:white;padding:35px;width:40%;margin-top:45px;margin-left:20%;margin-right:20%;-moz-border-radius: 20px;-webkit-border-radius: 20px;-khtml-border-radius: 20px;border-radius: 20px;" class="selector"&gt;
  
      &lt;h1 id='player-title'&gt;&lt;/h1&gt;
  
      &lt;a class="media {width:300, height:300}" href="http://malsup.github.com/video/clear.avi"&gt;AVI File&lt;/a&gt;
  
      &lt;span id='video'&gt;&lt;/span&gt;
  
      &lt;div id='left' style="display:block;clear:left;width:50%;border:1px;"&gt;
  
          &lt;p id='director-text'&gt;&lt;/p&gt;
  
          &lt;p id='writer-text'&gt;&lt;/p&gt;
  
          &lt;p id='actors-text'&gt;&lt;/p&gt;
          &lt;br/&gt;&lt;br/&gt;
          &lt;p id='plot-text'&gt;&lt;/p&gt;
          &lt;br/&gt;&lt;br/&gt;
  
      &lt;/div&gt;
  
      &lt;div id='right' style="display:block;clear:left;width:50%;"&gt;
  
          &lt;img id='poster_show' src='' width='200' alt='Poster'&gt;
  
      &lt;/div&gt;
  
      &lt;br style="clear:both;"/&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you</p>