How to add an additional button to the controlbar with jwplayer 7

Question

I am interested in adding a download video button, similar to the one here -- http://support.jwplayer.com/customer/portal/articles/1436999-example-adding-a-download-button. However, I would like to add it within the control bar (a download arrow to the far right).

How would I add in additional buttons to the controlbar in jwplayer 7?

This is really for just adding dock buttons. We do not have APIs for adding buttons to the control bar, I'm afraid. — emaxsaun, Aug 24 '15 at 21:59
Were you able to get this working? I am using lidox's solution to add to the controlbar but can't seem to get the onClick event working — crobicha, Oct 11 '16 at 15:11

lidox · Answer 1 · 2016-04-05T15:06:15.980

4

For JW Player 7.3 you can do this via JS

    playerInstance.onReady(function(){
            var myLogo = document.createElement("div");
            myLogo.id = "myTestLogo";
            myLogo.setAttribute('style',"color: red; padding-left: 5px; margin-right: 5px; margin-top: 10px; background-image: url('/icon_dir.png');background-repeat: no-repeat;");
            myLogo.setAttribute('class','jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-logo');
            myLogo.setAttribute('onclick','window.location="http://jwplayer.com"');
            document.getElementsByClassName('jw-controlbar-right-group')[0].appendChild(myLogo);
    });

edited Apr 05 '16 at 15:06

answered Apr 05 '16 at 15:00

lidox

1,901
3
21
40

nice solution! I used it to insert a button for resizing the player. Thanks. – Samia Ruponti May 31 '16 at 06:15
1

Is there a way to use this pattern with a React component, instead of using document.createElement? – crobicha Oct 06 '16 at 04:42
sorry, I never used react before. maybe you open an issue/question? – lidox Oct 06 '16 at 07:16
1

I actually figured that bit out, but I am wondering if the onclick event was working for you? It did not work for me and I am trying to add my own event listener but it seems that there is no onclick event happening – crobicha Oct 11 '16 at 15:09
@crobicha How did you managed to add react component ? – Michał Lach Mar 23 '23 at 12:10

score 3 · Accepted Answer · edited Sep 01 '19 at 12:44

playerInstance.on('ready',function() {
                    if (jwplayer().getRenderingMode() == "html5"){
                        videoTag = document.querySelector('video');
                         if(videoTag.playbackRate) {
                            playerInstance.addButton(
                                "icon_dir.png",
                                "0.25x", 
                                function() {
                                  changeSpeed(0.25);
                                },
                                "0p25xslow"
                            );

                            playerInstance.addButton(
                                "icon_dir.png",
                                "0.5x", 
                                function() {
                                  changeSpeed(0.5);
                                },
                                "0p5slow"
                            );

                            playerInstance.addButton(
                                "icon_dir.png",
                                "1x", 
                                function() {
                                  changeSpeed(1);
                                },
                                "1xnormal"
                            );

                            playerInstance.addButton(
                                "icon_dir.png",
                                "1.5x", 
                                function() {
                                  changeSpeed(1.5);
                                },
                                "1p5xforward"
                            );

                            playerInstance.addButton(
                                "icon_dir.png",
                                "2x", 
                                function() {
                                  changeSpeed(2);
                                },
                                "2xforward"
                            );
                        }
                    }
                    else{
                        alert("your browser doesn't support HTML5，cant't change speed.");
                    }
                    console.log("state is :"+playerInstance.getState());
                });

You forgot to close the quotes after "icon_dir.png at 3rd button — AlexanderF, Oct 10 '16 at 08:42

How to add an additional button to the controlbar with jwplayer 7

2 Answers2

Linked