CODEWITHSUNDEEP
jqueryjquery-pluginsmedia
crosenblum
crosenblum

Reputation: 1927

Trying to get jQuery Media Plugin to work

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.

But right now I am unable to get the demo to work locally on my pc.

http://jquery.malsup.com/media/video.html

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.

Can you help identify any problems with the code?

http://pastebin.com/4GxaT7PX

Or since some of you asked for the actual code here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Play Movie using jPlayer</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<style type="text/css">
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 }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://jquery.malsup.com/jquery.metadata.v2.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.media.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>

<script type="text/javascript">
//<![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('&');
        for(var i = 0; i < 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("[?|&]"+name+'=(.+?)(&|$)'))||[,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('<b>Director:</b> '+director);
    $('#writer-text').html('<b>Writer:</b> '+writer);
    $('#actors-text').html('<b>Actors:</b> '+actors);
    $('#plot-text').html(plot);
    $("#poster_show").attr("src",poster_src);

    // clean up path
    path = decodeURIComponent(path);

    // create player stuff
    // $('.media').html('<a href="'+path+'" class="media">Watch my movie!</a>');
    // $('#video').media( { width: 400, height: 300, autoplay: true } ); 

});
//]]>

</script>

</head>
<body>

<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">

    <h1 id='player-title'></h1>

    <a class="media {width:300, height:300}" href="http://malsup.github.com/video/clear.avi">AVI File</a>

    <span id='video'></span>

    <div id='left' style="display:block;clear:left;width:50%;border:1px;">

        <p id='director-text'></p>

        <p id='writer-text'></p>

        <p id='actors-text'></p>
        <br/><br/>
        <p id='plot-text'></p>
        <br/><br/>

    </div>

    <div id='right' style="display:block;clear:left;width:50%;">

        <img id='poster_show' src='' width='200' alt='Poster'>

    </div>

    <br style="clear:both;"/>

</div>

</body>
</html>

Thank you

Upvotes: 0

Views: 4120

Answers (1)

jamesmortensen
jamesmortensen

Reputation: 34078

The lines of code that perform the conversion of the hyperlinks into actual jQuery media markup are commented out in your code.

I commented out the line for the #video element and renamed it for the elements identified by the .media class. Afterwards, I could see the video player frame with text telling me I needed to download Windows Media Player, which is the same result I get on the jQuery Media demo sites. I am on Linux, so this type of message is of course expected:

// create player stuff
 $('.media').html('<a href="'+path+'" class="media">Watch my movie!</a>');
 // $('#video').media( { width: 400, height: 300, autoplay: true } );

 // this tells jQuery Media which elements to bind to.
 $('.media').media( { width: 400, height: 300, autoplay: true } );

Assuming there are no other errors in your code, and assuming all of the query string parameters are present in the address bar, and assuming your browser has all of the necessary plugins, you should see the video.

As you may or may not be aware, all of these parameters are required in order for this to work:

?title=James&year=1&rated=1&genre=horror&director=me&writer=me&actor=test&plot=p&imdbid=5&poster=1&path=file:///home/james/video/s3e2.avi

As a side-note, consider adding a try/catch block or some checks to handle the data gracefully if something non-critical is omitted.

Upvotes: 3

Related Questions