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（使用左箭头快退，右箭头快进）