0

jQueryドキュメントの準備ができたら、ページに表示されるjPlayerを初期化する必要があります。

成功後にAJAXを呼び出すと、プレーヤーは表示されますが、ポスターとビデオは表示されないため、ビデオを再生できません。

AJAX 応答の後、jPlayer を初期化していますが、ページはリロードされず、1 つの div のみが変更されます。

たぶん、AJAX なしで jPlayer を管理する必要があります。AJAX では正しく動作しないためです。

<html>
<head>
jQuery(function($){
function loadPlayer(){
    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                webmv: "http://",
                poster: "http://",
            });
        },
        play: function() { // To avoid both jPlayers playing together.
            $(this).jPlayer("pauseOthers");
        },
        repeat: function(event) { // Override the default jPlayer repeat event handler
            if(event.jPlayer.options.loop) {
                $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
                    $(this).jPlayer("play");
                });
            } else {
                $(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
                $(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
                    $("#jquery_jplayer_2").jPlayer("play", 0);
                });
            }
        },
        swfPath: "jplayer/js",
        supplied: "webmv",
        size: {
            width: "640px",
            height: "360px",
            cssClass: "jp-video-360p"
        },      
        cssSelectorAncestor: "#jp_container_1"
    });
});
}
loadPlayer();
</head>
<body>
<div id="mydiv"></div>
    <div id="jp_container_1" class="jp-video jp-video-270p">
        <div class="jp-type-playlist">
            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
            <div class="jp-gui">
                <div class="jp-video-play">
                    <a href="javascript:;" class="jp-video-play-icon" id="jp-video-play-icon" tabindex="1">play</a>
                </div>
                <div class="jp-interface" id="jp-interface">
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <div class="jp-controls-holder" id="jp-controls-holder">
                        <ul class="jp-controls" id="jp-controls">
                            <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                        </ul>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                        <ul class="jp-toggles">
                            <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
                            <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
                            <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                            <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                        </ul>
                         <ul id="navbar">
  <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
     <li><a href="javascript:;" class="jp-settings" tabindex="1"></a>
     <ul>
        <li><span>Quality</span></li>
        <li><a href="#">720p</a></li>
        <li><a href="#" class="active">360p</a></li>
        <li><a href="#">240p</a></li>
        </ul>
     </li>
  </ul>
                    </div>

                    <div class="jp-title">
                      <ul>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="jp-playlist">
                <ul>
                    <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                     <li></li>
                </ul>
            </div>
            <div class="jp-no-solution">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>
<input type="submit" name="loadAJAX" id="loadAJAX" value="Call AJAX" />
<script type="text/javascript>

$("#loadAJAX").click(function() {

$.ajax({
        type: "POST", 
        url: abc,
        dataType: 'json',
        success: function(data) {
        data +='player div goes here'
          $("#mydiv").html(data);
          loadPlayer();
        }
        });


});
</script>

これについて何か助けはありますか？

4

1 に答える 1

1

あなたの問題はsuccessハンドラー (および全体的なアプローチ) にあり、div の外にプレーヤーのプレースホルダーがあるという事実があると思います (私が正しく理解していれば、プレーヤーのマークアップを にプッシュしようとしていますmyDiv)。私がすることをお勧めします：

  • ページが正常に読み込まれるときに、jPlayer マークアップを HTML に設定します (提供されたコードのように)。
  • サーバーの AJAX ハンドラーがメディア (URL、ポスターなど) の JSON オブジェクトを返すようにします。
  • Onを使用しsuccessてマークアップを再作成するのではなく、データが返された既存のプレーヤーをloadPlayer()使用します。setMedia()
  • 必要に応じてプレーヤーを表示/非表示にします。起動時に非表示にして、AJAX が成功した後に表示するように。

例（明らかに、すでに持っている多くのコードを省略しました）：

<script>
    $(function(){
        $("#jquery_jplayer_1").jPlayer({.....}); // setup player on normal load
    });

    // set proper JSON object as media and display a player placeholder
    function loadMedia(mediaObject){
        $("#jquery_jplayer_1").setMedia(mediaObject);
        $("#jquery_jplayer_1").show();
    }

    $("#loadAJAX").click(function() {

        $.ajax({
                type: "POST", 
                url: abc,
                dataType: 'json',
                success: function(data) {
                    loadMedia(data.mediaObject);
                    doOtherStuff(data.otherData);
                }
            });
     }
</script>
<body>
    <div id="mydiv"></div>
        <div id="jp_container_1" class="jp-video jp-video-270p" style="display:none;">
            <div class="jp-type-playlist">
                <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                ........
<body>
于 2012-07-13T08:14:46.720 に答える