CODEWITHSUNDEEP
javascriptbuttonjwplayer
Tung Hoang
Tung Hoang

Reputation: 23

How to display "Previous" button with playlist in JW Player?

https://i.sstatic.net/MXTB3.jpg

I'm using JW Player with a playlist (3 items).

But as you can see in the image, it only shows a "Next" button.

Could you please help me to display the "Previous" button?

I've read the JW Player documentation but can't find it.

Upvotes: 1

Views: 2008

Answers (2)

Cave Johnson
Cave Johnson

Reputation: 6778

Here is what I've had to do to add a "previous" button to my player using the addButton function from the JW Player API. This is for JW Player 8. Note that it requires jquery to move the "previous" button next to the "next" button. I've included jquery in the code.

<div id="player"></div>
<script src="/path/to/your/jwplayer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    var player = jwplayer('player');

    jwplayer.key="your license key goes here";

    player.setup({
        playlist: 'https://cdn.jwplayer.com/v2/playlists/6tYY3mSy'
    });


    player.on('ready', function() {

        // The following code uses the addButton function from the JW Player API.
        player.addButton(
            '<svg xmlns="http://www.w3.org/2000/svg" class="jw-svg-icon jw-svg-icon-prev" viewBox="0 0 240 240"><path transform="translate(240, 0) scale(-1, 1) " d="M165,60v53.3L59.2,42.8C56.9,41.3,55,42.3,55,45v150c0,2.7,1.9,3.8,4.2,2.2L165,126.6v53.3h20v-120L165,60L165,60z"></path></svg>',
            'Previous',
            function() {
                if (player.getPlaylistIndex() === 0) {
                    // If the user is at the first video in the playlist, loop around to the last video
                    player.playlistItem( Math.max(0, player.getPlaylist().length - 1) );
                }
                else {
                    // Otherwise, go to the previous video in the playlist
                    player.playlistItem( Math.max(0, player.getPlaylistIndex() - 1) ); 
                }
            },
            'previous',
            'jw-icon-prev'
        );

        // The following line is a hack to move the button next to the "next" button
        // Note that this is not officially supported so use at your own risk. It has worked fine for me so far.
        $('.jw-controlbar .jw-icon-next').before($('.jw-icon-prev'));
    });
</script>

Upvotes: 1

jherrieven
jherrieven

Reputation: 425

This "feature" was introduced in JW 7.7.0, and with the latest JW version being JW7.7.6, there is still no official way to configure/customise/turn it off.

It ties in with the "Next Up" functionality and a new overlay playlist which can really mess with your JW implementation if you are not on the ball - but the JW Team don't seem to care about that!

You can write your own JS/CSS to hide these new elements and add in the "previous" functionality, but the cleanest route for now would be to revert to using JW 7.6.1.

You can link to the cloud library here: //ssl.p.jwpcdn.com/player/v/7.6.1/jwplayer.js

Upvotes: 1

Related Questions