如何在播放按钮后安排下一个按钮

Question

我想在 video.js

中的播放按钮之后放置下一个按钮

下面是我的实际代码：

 const  handleClick =  () => {
           return navigate(`/videos/${this.props.nextVideo && this.props.nextVideo.get("_id")}`);
        };
        var Button = videojs.getComponent('Button');
        var MyButton = videojs.extend(Button, {
            constructor: function () {
                Button.apply(this, arguments);
                this.addClass('fa');
                this.addClass('fa-angle-right');
                this.controlText("Exit Course");
            },
            handleClick: function () {
                handleClick()
            }
        });
        videojs.registerComponent('MyButton', MyButton);
        return (
            <div data-vjs-player>
                <video

                    ref={node => (this.videoNode = node)}
                    className="video-js vjs-default-skin vjs-16-9"
                    preload="auto"
                    poster={this.props.preview || this.props.sources.thumbnail}
                    playsInline
                    controls

                    // TODO:
                    // investigate why that callback called multiple times
                    // onPlay={this.props.onVideoPlay}
                >
                    <source
                        src={this.props.sources.low}
                        type="video/mp4"
                        res="360"
                        label="360p"
                    />
                </video>

这就是我在 componenetDidmount 中的播放视频按钮之前添加按钮的方式：

this.player = videojs(this.videoNode, {
            autoplay: this.props.isAutoplay,
            plugins: {"ads-setup": {}}
        }); 

// Button added before play button
 var button = this.player.getChild('controlBar').addChild('myButton', {});
        button.el();
        this.player.controlBar.el().insertBefore(button.el(), this.player.controlBar.el().firstChild)

如何添加下一步按钮？

Answer 1

addChild 的第三个参数是插入子节点的索引。

this.player.getChild('controlBar').addChild('myButton', {}, 1);