reactjs - 如何在播放按钮后安排下一个按钮
问题描述
我想在 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);
推荐阅读
- javascript - Elasticsearch:如何使用javascript客户端以降序表示search_after中未定义的日期?
- python - 如何启动 Quart Telethon 示例项目?
- git - 403 禁止的 npm - cicd
- java - Java 流抛出 java.lang.IllegalStateException: Duplicate key
- discord.py - 我在使用列出 CS 1.6 服务器上的玩家的不和谐机器人时遇到问题
- autodesk-forge - 是否可以自定义 Forge 查看器版本 7 的加载微调器?
- outlook - 在线托管的 Outlook 签名图像不刷新?
- regex - 为显示名称构建正则表达式
- python - 如何将数据框/列表/数组的数据框转换为 sql 表?
- javascript - 谁能帮我解释一下这段代码?谢谢