如何使用 jwplayer 7 向控制栏添加附加按钮答案

【问题标题】：How to add an additional button to the controlbar with jwplayer 7如何使用 jwplayer 7 向控制栏添加附加按钮
【发布时间】：2019-09-01 20:44:51
【问题描述】：

我有兴趣添加一个下载视频按钮，类似于此处的那个 -- http://support.jwplayer.com/customer/portal/articles/1436999-example-adding-a-download-button。但是，我想在控制栏中添加它（最右边的下载箭头）。

如何在 jwplayer 7 的控制栏中添加其他按钮？

【问题讨论】：

这真的只是为了添加停靠按钮。恐怕我们没有用于向控制栏添加按钮的 API。
你能做到吗？我正在使用 lidox 的解决方案添加到控制栏，但似乎无法让 onClick 事件正常工作

标签： jwplayer jwplayer7

【解决方案1】：

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

【讨论】：

您忘记在“icon_dir.png at 3rd button”之后关闭引号

【解决方案2】：

对于 JW Player 7.3，您可以通过 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);
    });

【讨论】：

不错的解决方案！我用它来插入一个按钮来调整播放器的大小。谢谢。
有没有办法将此模式与 React 组件一起使用，而不是使用 document.createElement？
对不起，我以前从未使用过 react。也许你打开一个问题/问题？
我实际上已经弄清楚了这一点，但我想知道 onclick 事件是否对您有用？它对我不起作用，我正在尝试添加自己的事件侦听器，但似乎没有发生 onclick 事件