如果是单纯的追加按钮
var Player = videojs('videoHtml', options, function (){
//这里是回调事件
this.on('ended',function(){
JKVideo.on.ended(playTime());
streamComplete();
}),
this.one('play',function(){
});
}
Player.ready(function() {
var player = this;
player.controlBar.addChild('TitleBar', {
// text: '快退',
el: videojs.createEl('button', {
title: '快退十秒',
className: 'vjs-icon-previous-item vjs-fast-replay-button vjs-control vjs-button',
innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">快退</span>'
}),
clickHandler: function() {
player.currentTime(player.currentTime() - 10);
}
});
player.controlBar.addChild('Button', {
text: '快进',
el: videojs.createEl('button', {
title: '快进十秒',
// className: 'vjs-fast-forward-button vjs-control vjs-button',
className: 'vjs-icon-next-item vjs-fast-forward-button vjs-control vjs-button',
innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">快进</span>'
}),
clickHandler: function() {
player.currentTime(player.currentTime() + 10);
}
});
});
如果需要添加到指定位置例如我这是添加到播放按钮前后的位置
这就需要创建player之前先创建component组件然后在options中指定创建的component组件位置
// 创建新组件
// 创建快退组件
const Component = videojs.getComponent('Component');
class FastReplayButton extends Component {
constructor(player, options = {}) {
super(player, options);
this.on('click', this.handleClick);
}
createEl() {
return videojs.dom.createEl('button', {
title: '快退十秒',
className: 'vjs-icon-previous-item vjs-fast-replay-button vjs-control vjs-button',
innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">快退</span>'
});
}
handleClick () {
play_fast_back();
}
}
videojs.registerComponent('FastReplayButton', FastReplayButton);
方式二
// 创建快进组件
var baseComponent = videojs.getComponent('Component')
var FastForwardButton = videojs.extend(baseComponent, {
constructor: function(player, options) {
baseComponent.apply(this, arguments)
this.on('click', this.clickfastForward)
},
createEl: function() {
var divObj = videojs.dom.createEl('button', {
title: '快进十秒',
// className: 'vjs-fast-forward-button vjs-control vjs-button',
className: 'vjs-icon-next-item vjs-fast-forward-button vjs-control vjs-button',
innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">快进</span>'
})
return divObj
},
clickfastForward: function() {
play_fast_next();
}
})
videojs.registerComponent('FastForwardButton', FastForwardButton);
这个可以直接追加到最后
// 找到 controlBar 节点,添加控件 这里也可以使用追加到最后的方式
// Player.getChild('controlBar').addChild('myComponent')
var options = {
language:'zh-CN', autoplay: true, preload: 'auto',
techOrder: ['html5'], playbackRates: [0.75,1, 1.25, 1.5, 2],
nativeControlsForTouch: false,
controlBar: {
children: ['FastReplayButton', 'playToggle', 'FastForwardButton', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'fullscreenToggle']
,/*children: [
"iconPreviousItem",
"Button",
"playToggle", // 播放暂停
"volumePanel", // 音量
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle", // 全屏
],*/
},
};
var Player = videojs('videoHtml', options, function (){ }
this.on('ended',function(){
}),
this.one('play',function(){
});
});
// 快进快退触发事件
/* 控制播放器快进10秒 */
function play_fast_next() {
Player.currentTime(Player.currentTime()+10);
}
/* 控制播放器后退10秒 */
function play_fast_back() {
Player.currentTime(Player.currentTime()-10);
}