如何在播放按钮后安排下一个按钮
How to arrange next button after play button
我想在 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)
如何添加下一步按钮?
addChild
的第三个参数是插入子节点的索引。
this.player.getChild('controlBar').addChild('myButton', {}, 1);