JPlayer + Ajax页面加载

时间:2012-08-20 10:31:19

标签: ajax callback load jplayer

我会尽量保持这个简短:

如何在ajax页面加载后设置一个独特的jPlayer实例(http://jplayer.org/)“工作”?

我的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({
            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>

对于非独特的东西,例如prettyPhoto灯箱,我创建了一个函数(prettyPhoto();我放入了回调。但我似乎无法使用jplayer!

任何帮助都会受到影响!

1 个答案:

答案 0 :(得分:0)

我建议使用播放列表插件。

  1. 创建一个空的播放器实例

    var jpplaylist = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
        }, [], {
            swfPath: "/path/to/swf",
            supplied: "mp3",
            wmode: "window"
        });
    
  2. 加载AJAX页面后,使用setPlaylist函数添加曲目:

    jpplaylist.add({
        title:"Song Title",
        mp3:"http://example.com/example.mp3"
    });
    
  3. 完整的播放列表规范如下:http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/