jquery - jQuery Media Plugin を機能させようとしています

Question

jquery メディアプラグインのデモを動作させようとしています。デモが動作するようになったら、渡された URL パラメーターから収集したデータでパラメーターを置き換え始めることができます。

しかし、現在、デモを自分の PC でローカルに動作させることができません。

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>

ありがとうございました

score 3 · Accepted Answer

ハイパーリンクを実際の 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 - jQuery Media Plugin を機能させようとしています

1 に答える 1

Related

Reference