jwplayerjwplayer7

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


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?


Solution

  • 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());
                    });