添加自定义控件以响应 video.js 控件的活动状态

问题描述

我正在使用 video.js 来播放我的 *.hls 文件，并且我正在使用它们的默认皮肤。我使用 JavaScript、HTML 和 CSS 为视频添加了退出控件。我希望在用户处于非活动状态时退出控件随视频控件一起消失。我该怎么做？我是在元素上添加一些类还是在 js 上添加一些代码？showing the default video controls from video.js and I add an exit control at the top

解决方法

有多种方法可以做到这一点。

根据我的理解，使用“useractive”和“userinactive”事件来显示或隐藏您的 css 类将是最好的方法，而无需操作 video.js 代码本身..

如果您想操作代码本身，那么您可以查找 player.controlBar.fadeIn() 和 player.controlBar.fadeOut() 函数（假设播放器是视频对象..）并将您的 css 类添加到功能。

The Doc for Video.js 有一些关于我提到的事件的信息。 这应该会有所帮助。