javascript - jPlayer - 通过 Javascript 实现倒带功能

Question

我在使用 jPlayer 时遇到了问题 在搜索了几个地方后，我认为它在这里的使用足够普遍，而且肯定有人遇到过类似的问题。

我正在使用 jPlayer 播放音频文件，我的用户希望通过特定的热键实现快进和快退功能。我注意到 jPlayer 没有提供开箱即用的这个功能(它目前只能通过点击进度条来处理快进和倒带)

理想情况下 - 只需按一次按键即可切换快进(或倒带)。当再次按下相同的键时，音频文件将根据当前位置开始播放。

Answer 1

我决定对此实现自己的解决方案，目前看来效果不错。我想我会分享它以防其他人遇到这样的问题。

请原谅粗暴的实现。这只是一个概念证明:

必要的 Javascript:

//Handles the key down event (so the user can hold a key down to continue)
$(document).keydown(function (e) {
    //Rewind
    if (e.keyCode == 37 && (!rewinding)) {
        rewinding = true;
        //Pause the player
        $("#player").jPlayer("pause");
        RewindTrack();
        rwaction = window.setInterval(function () { RewindTrack() }, 500);
    }
    else if (e.keyCode == 39 && (!fastforward)) {
        fastforward = true;
        //Pause the player
        $("#player").jPlayer("pause");
        FastforwardTrack();
        ffaction = window.setInterval(function () { FastforwardTrack() }, 500);
    }
});
//Ends the action
$(document).keyup(function (e) {
    //Rewind
    if (e.keyCode == 37) {
        rewinding = false;
        window.clearInterval(rwaction);
        $("#player").jPlayer("pause");
    }
    else if (e.keyCode == 39) {
        fastforward = false;
        window.clearInterval(ffaction);
        $("#player").jPlayer("pause");
    }
});

//Related function
function GetPlayerProgress() {
    return ($('.jp-play-bar').width() / $('.jp-seek-bar').width() * 100);
}

//Handles rewinding
function RewindTrack() {
    //Get current progress and decrement
    var currentProgress = GetPlayerProgress();
    //Rewinds 10% of track length
    var futureProgress = currentProgress - 10;
    //If it goes past the starting point - stop rewinding and pause
    if (futureProgress <= 0) {
        rewinding = false;
        window.clearInterval(rwaction);
        $("#player").jPlayer("pause", 0);
    }
    //Continue rewinding
    else {
        $("#player").jPlayer("playHead", parseInt(futureProgress, 10));
    }
}

//Fast forwards the track
function FastforwardTrack() {
    //Get current progress and increment
    var currentProgress = GetPlayerProgress();
    //Fast forwards 10%
    var futureProgress = currentProgress + 10;
    //If the percentage exceeds the max - stop fast forwarding at the end.
    if (futureProgress >= 100) {
        fastforward = false;
        window.clearInterval(ffaction);
        $("#player").jPlayer("playHead", parseInt($('.jp-duration').text().replace(':', '')));
    }
    else {
        $("#player").jPlayer("playHead", parseInt(futureProgress, 10));
    }
}

Working Demo (使用向左箭头快退，向右箭头快进)