Как загрузить jplayer в накладку fancybox, включая элементы управления jplayer

Question

Я могу загрузить jplayer (jplayer.org) в наложение на обложке, но я не могу узнать, как включить элементы управления игрока. Я делаю это сейчас:

$(function() { 
    $("a.jwVideo").click(function() { 
     var myVideo = this.href; // Dont forget about 'this' 

     $.fancybox({ 
      padding : 0, 
      content: '<div id="video_container">Loading the player ... </div>', 
      afterShow: function(){ 
       $("#video_container").jPlayer({ 
     ready: function() { 
      $(this).jPlayer("setMedia", { 
      m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v", 
      ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv", 
      poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" 
      }); 
     }, 
     swfPath: "/js", 
     supplied: "m4v, ogv" 
     }); 


      } 
     }); 
     return false; 
    }); 
}); 

Может кто-то момент меня, как я включать элементы управления, которые будут загружены в FancyBox накладкой, когда он открывает? Это дива из jplayer:

<div id="jp_container_1" class="jp-video "> 
    <div class="jp-type-single"> 
     <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" tabindex="1">play</a> 
     </div> 
     <div class="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"> 
      <ul class="jp-controls"> 
       <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-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-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> 
      </div> 
      <div class="jp-title"> 
      <ul> 
       <li>Big Buck Bunny Trailer</li> 
      </ul> 
      </div> 
     </div> 
     </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> 

Я могу добавить интерфейс jplayer, как это, но это правильно не подключиться к окну видео в фантазии поля наложения. Любые указатели?

$(function() { 
    $("a.jwVideo").click(function() { 
     var myVideo = this.href; // Dont forget about 'this' 

     $.fancybox({ 
      padding : 0, 
      content: '<div id="video_container">Loading the player ... </div>', 
      afterShow: function(){ 
       $("#video_container").jPlayer({ 
     ready: function() { 
      $(this).jPlayer("setMedia", { 
      m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v", 
      ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv", 
      poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" 
      }); 
     }, 
     swfPath: "/js", 
     supplied: "m4v, ogv" 
     }); 
      $('#video_container').append('<div id="jp_container_1" class="jp-video "><div class="jp-type-single"><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" tabindex="1">play</a></div><div class="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"><ul class="jp-controls"><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-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-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></div><div class="jp-title"><ul><li>Big Buck Bunny Trailer</li></ul></div></div></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>'); 

      } 
     }); 
     return false; 
    }); 
}); 

Я также пробовал это, но это тоже не помогает.

$(function() { 
$("a.jwVideo").click(function() { 
    var myVideo = this.href; // Dont forget about 'this' 

    $.fancybox({ 
     padding : 0, 
     content: '<div id="video_container">Loading the player ... </div>', 
     afterShow: function(){ 
      $("#video_container").jPlayer({ 
    ready: function() { 
    $(this).jPlayer("setMedia", { 
    m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v", 
    ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv", 
    poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" 
    }); 
    }, 
    swfPath: "/js", 
    supplied: "m4v, ogv", 
    cssSelectorAncestor: "", 
    cssSelector: { 
    play: "#play", 
    pause: "#pause", 
    stop: "#stop", 
    mute: "#mute", 
    unmute: "#unmute", 
    currentTime: "#currentTime", 
    duration: "#duration" 
    }, 
    size: { 
    width: "640px", 
    height: "500px" 
    } 
    }); 

    $('#video_container').append('<p><a href="javascript:;" id="play">play</a><a href="javascript:;" id="pause">pause</a> | <a href="javascript:;" id="stop">stop</a> | <a href="javascript:;" id="mute">mute</a><a href="javascript:;" id="unmute">unmute</a> | <span id="currentTime"></span>/<span id="duration"></span></p><div id="jquery_jplayer_1" class="jp-jplayer">xxx</div>'); 

     } 
    }); 

    return false; 

}); 

});

Answer 1

О, мой. Я загружал игрока в неправильный div. Сейчас он работает:

$(function() { 
    $("a.jwVideo").click(function() { 
     var myVideo = this.href; // Dont forget about 'this' 

     $.fancybox({ 
      padding : 0, 
      content: '<div id="video_container">Loading the player ... </div>', 

      afterShow: function(){ 
       $('#video_container').append('<div><p><a href="javascript:;" id="play">play</a><a href="javascript:;" id="pause">pause</a> | <a href="javascript:;" id="stop">stop</a> | <a href="javascript:;" id="mute">mute</a><a href="javascript:;" id="unmute">unmute</a> | <span id="currentTime"></span>/<span id="duration"></span></p></div><div id="jquery_jplayer_1" class="jp-jplayer">xxx</div>'); 

       $("#jquery_jplayer_1").jPlayer({ 

        ready: function() { 
        $(this).jPlayer("setMedia", { 
         m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v", 
         ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv", 
         poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" 
        }).jplayer("play"); 
        }, 

        swfPath: "/assets/jplayer", 
        supplied: "m4v, ogv", 
        cssSelectorAncestor: "", 

        cssSelector: { 
        play: "#play", 
        pause: "#pause", 
        stop: "#stop", 
        mute: "#mute", 
        unmute: "#unmute", 
        currentTime: "#currentTime", 
        duration: "#duration" 
        }, 

        size: { 
        width: "640px", 
        height: "500px" 
        } 

       }); 

      } 
     }); 

     return false; 

    }); 
});