JPlayer + Ajax页面加载 [英] JPlayer + Ajax page load

问题描述

我会尽量保持简短：

我将如何管理jPlayer的独特实例（http://jplayer.org/）工作在ajax页面加载后？

我的jPlayer使用以下内联JavaScript代码：

 < ;? 
 $ mp3 = get_post_meta（get_the_ID（），'audio_mp3'，TRUE）; 
 $ ogg = get_post_meta（get_the_ID（），'audio_ogg'，TRUE）; 
 
？> 
 
<？php if（$ mp3&& $ ogg）{？> 
 
< script type =text / javascript> 
 jQuery（document）.ready（function（$）{
 
 
 jQuery（'＃jquery_jplayer_<？php the_ID（）;？>'）.jPlayer b $ b ready：function（）{
 jQuery（this）.jPlayer（'setMedia'，{
 mp3：<？php echo（$ mp3）;？>，
 oga：<？php echo（$ ogg）;？>
}）; 
}，
 swfPath：<？php echo get_template_directory_uri / js / jplayer /，
 cssSelectorAncestor：＃jp_container_<？php the_ID（）;？>，
提供：<？php if（$ mp3！=' > mp3，<？php endif;？><？php if（$ ogg！=''）：？> oga，<？php endif; 
 
 
}）; 
 
< / script> 
 

对于非唯一的东西，比如prettyPhoto lightbox，我创建了一个函数（prettyPhoto

任何帮助都会被拒绝！

1. 建议使用播放清单

     var jpplaylist = new jPlayerPlaylist（{
    jPlayer：＃jquery_jplayer_1，
    cssSelectorAncestor： ＃jp_container_1
   }，[]，{
    swfPath：/ path / to / swf，
   提供：mp3，
    wmode：window$ b $在您的AJAX页面加载后，使用setPlaylist函数添加您的轨道（例如：a）; b） 
     jpplaylist.add（{
    title：Song Title，
    mp3：http： //example.com/example.mp3
   }）; 
     
    




完整的播放列表规格如下： http：// www .jplayer.org / latest / demo-02-jPlayerPlaylist /

I will try to keep this short:

How would i manage to make a unique instance of jPlayer (http://jplayer.org/) "work" after an ajax page load?

My jPlayer uses the following inline javascript code:

<?
    $mp3    = get_post_meta(get_the_ID(), 'audio_mp3', TRUE);
    $ogg    = get_post_meta(get_the_ID(), 'audio_ogg', TRUE);

?>

<?php if($mp3 && $ogg) { ?>

<script type="text/javascript">
jQuery(document).ready(function($) {


        jQuery( '#jquery_jplayer_<?php the_ID(); ?>' ).jPlayer({
            ready: function() {
                jQuery(this).jPlayer('setMedia', {
                    mp3: "<?php echo ($mp3); ?>",
                    oga: "<?php echo ($ogg); ?>"
                    });
                },
            swfPath: "<?php echo get_template_directory_uri(); ?>/js/jplayer/",
            cssSelectorAncestor: "#jp_container_<?php the_ID(); ?>",
            supplied: "<?php if($mp3 != '') : ?>mp3, <?php endif; ?><?php if($ogg != '') : ?>oga, <?php endif; ?> all"
        });


});

</script>

For non unique stuff like a prettyPhoto lightbox for example i created a function (prettyPhoto(); wich i put in the callback. But i cannot seem to get this working with jplayer!

Any help would be apriciated!

解决方案

I recommend using the playlist add-on.

1. Create an empty player instance

   var jpplaylist = new jPlayerPlaylist({
       jPlayer: "#jquery_jplayer_1",
       cssSelectorAncestor: "#jp_container_1"
       }, [], {
           swfPath: "/path/to/swf",
           supplied: "mp3",
           wmode: "window"
       });
   

2. After your AJAX page load, use the setPlaylist function to add your tracks:

   jpplaylist.add({
       title:"Song Title",
       mp3:"http://example.com/example.mp3"
   });
   

The full playlist specs are here: http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

这篇关于JPlayer + Ajax页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！