jPlayer - 通过 Javascript 实现倒带功能

Posted 2023-02-25

【中文标题】jPlayer - 通过 Javascript 实现倒带功能

【英文标题】：jPlayer - Implementing Rewind Functionality via Javascript

【发布时间】：2012-08-03 21:13:46

【问题描述】：

我在使用 jPlayer 时遇到了一个问题，我在搜索了几个地方后认为它在这里会很常用，并且肯定有人会遇到类似的问题。

我正在使用 jPlayer 播放音频文件，我的用户希望能够通过特定的热键快进和快退。我注意到 jPlayer 不提供开箱即用的此功能（它仅通过单击当前进度条来处理快进和快退）

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

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

【讨论】：

$("#player").jPlayer("pause", 0);这不适用于 ipad/iphone。你能帮帮我吗？