video.js创建定义快进快退按钮并实现指定位置显示

如果是单纯的追加按钮

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);
}