JWPlayer with forward and rewind buttons

Question

I am using jwplayer for one of my projects.Now the requirement states that the player should have "FORWARD" and "REWIND" button attached to it in order to navigate through the video easily.

I have looked at the documentation but did not find anything besides "seeking".

Hope to hear from you guys.

lidox lidox · Accepted Answer · 2016-04-25T16:15:15

For JW Player 7.3 you can do this via JS and CSS! Just make sure you have both images:

/icons/play-backward-hhu.png

and

/icons/play-forward-hhu.png

CSS:

.jumpForward {
    background-image: url('/icons/play-forward-hhu.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: initial !important;

    display: table-cell !important;
    padding-bottom: 100% !important;
    padding-right: 16% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin: 0 auto !important;       
 }

.jumpBackward {
    background-image: url('/icons/play-backward-hhu.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: initial !important;
    color: rgba(240, 255, 255, 0) !important;
    padding-left: 16% !important;
    padding-bottom: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin: 0 auto !important;
 }

.jw-reset {
    line-height: 2em !important;
 }

.jw-skin-seven .jw-icon-display {
    display: table-cell !important; 
    font-size: 4em !important;  
}

.jw-display-icon-container {
    margin: -3.75em auto 0 !important;
    top: 50% !important;
    cursor: pointer !important;
}

.jw-display-icon-container img{
    width: auto  !important; 
    height: auto !important;
    max-width: 120px !important;
    max-height: 100px !important;
}

JS:

   <script type="text/javascript">
        var playerInstance = jwplayer('video');
        playerInstance.setup({
           ... you config here ...
        });
    </script>

<script type="text/javascript">  

    function jumpBySeconds(seksToJump) {
        var time = playerInstance.getPosition() + seksToJump;
        if(time < 0) { 
            time = 0; 
        }
        playerInstance.seek(time);
    }

    function displayButtons() {
        var playButton = document.getElementsByClassName('jw-controls jw-reset')[0];
        playButton.style.display = "block";
    }

    function hideButtons() {
        var playButton = document.getElementsByClassName('jw-controls jw-reset')[0];
        playButton.style.display = "none";
    }

    function addControlbarListeners(){
        var timer;
        var player = document.getElementsByClassName('jwplayer')[0];
        player.onmouseover = function(){displayButtons();}; 
        player.onmouseout = function(){hideButtons();};
        player.addEventListener("mousemove",function(){
            displayButtons();
            clearTimeout(timer);
            timer=setTimeout(mouseStopped,2000);
        });

        function mouseStopped(){                               
            hideButtons();
        }
    }

    function addPlayForwardAndBackwardButtons(){
        // add play 5 sek back button 
        var playBack = document.createElement("img");
        playBack.id = "play10sekback";
        playBack.setAttribute('class','jw-icon jw-icon-display jw-button-color jumpBackward jw-reset');   
        playBack.setAttribute('onclick','jumpBySeconds(-10)');

        var middleBar = document.getElementsByClassName('jw-display-icon-container jw-reset')[0];
        middleBar.appendChild(playBack);
        middleBar.setAttribute('style',"background-color:rgba(0, 0, 0, 0.0); border: 0px; display: flex;");
        var playButton = middleBar.childNodes[1];
        middleBar.removeChild(playButton);
        middleBar.appendChild(playButton);

        // add play 5 sek forward button 
        var playForward = document.createElement("img");
        playForward.id = "play10sekforward";
        playForward.setAttribute('class','jw-icon jw-button-color jw-icon-display jw-reset jumpForward');
        playForward.setAttribute('onclick','jumpBySeconds(10)');

        var middleBar = document.getElementsByClassName('jw-display-icon-container jw-reset')[0];  
        middleBar.appendChild(playForward);                     
        // set icon to center
        middleBar.style.width = "100%";
        middleBar.style.margin = "-1.0em auto 0";
    }

    playerInstance.onPause(function(){
        console.log("video stopped");
    });

    playerInstance.onPlay(function(){
        console.log("video playing...");
    });

    playerInstance.onReady(function(){            
        addPlayForwardAndBackwardButtons();
        addControlbarListeners();           
     });

</script>

JWPlayer with forward and rewind buttons

2 Answers