Question

我正在尝试拼凑一个播放两个音频文件的jPlayer示例，一个接着一个。

我需要有完整的事件控制，所以我决定不使用播放列表选项，除非有人能给我一个控制事件触发时间的方法的示例，例如：

第一个媒体'之前'功能
第一个媒体'追求'功能
第二媒体'之前'功能
第二媒体'追求'功能

下面我的示例是在“ends：”函数中使用全局变量，看起来非常笨拙。

有没有人有更好的建议我怎么做到这一点？这是我使用全局变量的工作示例：

$(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            console.log('ready function.');
        },
        ended: function()   {
                console.log('ending function starting.');
                var player = $("#jquery_jplayer_1");
                player.jPlayer("stop");
                player.jPlayer("clearMedia");
                player.jPlayer("setMedia", { 
                    wav: globalParmTwo
                }); 
                player.jPlayer("play", 0);
                globalParmTwo = null;
        },
        loop:  false,     // added to remove the if condition
        supplied: "wav, oga",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    });
});

var globalParmTwo = null;
function komPare(parmOne, parmTwo)  {
    globalParmTwo = parmTwo;
    var player = $("#jquery_jplayer_1");
    player.jPlayer("stop");
    player.jPlayer("clearMedia");
    player.jPlayer("setMedia", { 
        wav: parmOne
    }); 
    player.jPlayer("play", 0);
 }

这里是我使用播放列表的工作示例，这似乎是一个更好的解决方案，假设有一些方法可以在特定时间触发特定功能：

var myPlaylist = null;
$(document).ready(function(){

    myPlaylist = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_N",
        cssSelectorAncestor: "#jp_container_N"
    }, []
    , {
        playlistOptions: {
            enableRemoveControls: true
        },
        supplied: "wav, ogv",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
    });
    $('.jp-playlist').hide();
    myPlaylist.option("autoPlay", true);
});

function komPare(firstMediaUrl, secondMediaUrl) {
    myPlaylist.setPlaylist([
        { wav: firstMediaUrl },
        { wav: secondMediaUrl }
    ]);
};

任何建议都非常感谢。

更新：我删除了一个if条件，并在第一个例子中输入“loop：false”。

Answer 1

我们可以bind events to the playlist player，然后使用全球媒体计数器。这仍然使用全局变量，但代码更清晰。

一如既往，我们非常感谢任何建议。

var myPlaylist = null;
var mediaCounter = null;

$(document).ready(function(){

    myPlaylist = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1"
    }, []   // empty initial playlist
    , {
        playlistOptions: {
            enableRemoveControls: true
        },
        supplied: "ogv",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        audioFullScreen: false
    });
        $('#jquery_jplayer_1').bind($.jPlayer.event.ready,
            function(event) {
                console.log('ready.');
            }
        );
        $('#jquery_jplayer_1').bind($.jPlayer.event.loadeddata,
            function(event) {
                console.log('loadeddata ' + mediaCounter++ );
            }
        );
        $('#jquery_jplayer_1').hide();
        $('.jp-playlist').hide();
        $('.jp-controls').hide();
        myPlaylist.option("autoPlay", true);

});

function komPare()  {
    var playlist = [];
    for ( urlName of arguments ) {
        playlist.push( { ogv: urlName } );
    };
    mediaCounter = 0;
    myPlaylist.setPlaylist(playlist);
};

jPlayer播放两个媒体文件

1 个答案: