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

Posted 2023-02-25

【中文标题】添加自定义控件以响应 video.js 控件的活动状态

【英文标题】：add custom controls to respond with the active state of video.js controls

【发布时间】：2021-02-04 06:22:37

【问题描述】：

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

【参考方案1】：

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

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

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

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