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);
<video width="628" height="375" id="video" poster="img/video.png" autoplay="autoplay" preload="none" controls="controls">
    <source src="img/video.mp4" />
</video>
<p class="playBtn" id="playBtn"><img src="im
                                    vue3在video.js播放器控制栏增加一个自定义按钮；vue3怎么在video.js播放器控制栏增加一个自定义按钮；video怎么自定义控制按钮
npm install --save videojs-seek-buttons
forward - 如果数字大于 0，则将添加一个搜索前进按钮，该按钮会搜索该秒数
back - 如果数字大于 0，将添加一个后退按钮来寻找该秒数
forwardIndex - 在控制栏中插入按钮的位置。 默认为1 。 请参阅下面的注释。
 backIndex - 在控制栏中插入按钮的位置。 默认为1 。 请参阅下面的注释。
控制位置
forwardIndex和backIndex设置按钮在控制栏中的位置。 请注意，如果同时使用后退和前进按钮，则先插入前进按钮。
 假设标准控制栏，播放按钮位于索引0 。 两者的默认索引都为1 ，前进按钮插入播放按钮之后，然
<meta charset="utf-8">
<title>For list</title>
<link href = "./statics/video-js.css" rel = "stylesheet" type = "
问题原因：在移动端使用video.js与fastclick 冲突
解决方式：修改fastclick的源码
FastClick.prototype.needsClick = function(target) {
		switch (target.nodeName.toLowerCase()) {
		// Don't send a synthetic click to disabled inputs (issue #62)