Question

我正在尝试使用jquery媒体插件的演示。一旦我可以使演示工作，那么我将能够开始用从传递的url参数收集的数据替换参数。

但是现在我无法让我的电脑在本地工作。

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

以上是jquery媒体插件的视频演示。然后，当我尝试在本地制作我自己的版本时，我无法使其正常工作。

您能帮助识别代码中的任何问题吗？

或者，因为有些人在这里要求实际的代码是：

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

谢谢

Answer 1

执行将超链接转换为实际jQuery媒体标记的代码行在您的代码中被注释掉。

我注释了#video元素的行，并将其重命名为.media类标识的元素。之后，我可以看到带有文字的视频播放器框架，告诉我需要下载Windows Media Player，这与我在jQuery Media演示网站上获得的结果相同。我在Linux上，所以这种类型的消息当然是预期的：

// 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 } );

假设您的代码中没有其他错误，并假设地址栏中存在所有查询字符串参数，并假设您的浏览器具有所有必需的插件，则应该看到该视频。

正如您可能知道或不知道的那样，所有这些参数都是必需的：

?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

作为附注，考虑添加一个try / catch块或一些检查来优雅地处理数据，如果省略了非关键的东西。

试图让jQuery Media Plugin工作

1 个答案: