0

在准备好的 jQuery 文档中，我们必须初始化将显示在页面上的 jPlayer。

虽然 AJAX 调用成功后它会显示播放器，但它没有显示海报和视频，因此无法播放视频。

在 AJAX 响应之后，我们正在初始化 jPlayer，但页面不会重新加载，只有一个 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 之外有一个玩家占位符（如果我理解正确，您正在尝试将玩家标记推送到 div 中myDiv）。我建议做的事情：

  • 当页面正常加载时（如您提供的代码中所示），在 HTML 中设置您的 jPlayer 标记。
  • 使您的服务器的 AJAX 处理程序返回一些 JSON 对象用于媒体（网址、海报等）。
  • Onsuccess不要使用 重新创建标记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 回答