如何在用户不活动时切换自定义 video-js 组件可见性

如何解决如何在用户不活动时切换自定义 video-js 组件可见性

我在 React 中使用 VideoJS，并使用 videojs-overlay 创建了一个自定义标题栏组件。我想要的是，当用户处于非活动状态（鼠标不移动）时，该标题栏应该随着用户移动鼠标而淡出和淡入。这是在 ControlBar 组件中完成的，但对于自定义组件如何做尚不清楚。

var TitleBar = videojs.extend(Component,{
    constructor: function () {
        // It is important to invoke the superclass before anything else,// to get all the features of components out of the Box!
        Button.apply(this,arguments);
    },// The `createEl` function of a component creates its DOM element.
    createEl: function () {
        return videojs.dom.createEl('div',{
            //want to toggle show/hide on user activity here with CSS classes
            className: `vjs-title-bar`,alt: 'Title Bar',innerHTML: `
            <div class="back-btn" >
                <button onclick="alert(1234)" >
                    <span>
                        <i class="fas fa-long-arrow-left"></i>
                    </span>
                </button>
            </div>
            `,});
    },});

任何帮助将不胜感激

解决方法

我没有反应的经验，但试试这个：之后

Button.apply(this,arguments);

添加如下内容：

this.on(this.player(),["useractive","userinactive"],this.showHide);

然后将此函数添加到组件中：

showHide: function(ev) {
    if (ev.type === 'userinactive') {
        this.hide() //hide immediately! 
        //if you want animation,add class to your css and do this.addClass("myHideClass")
    } else {
        this.show();
    }
}