在Video.js的多实例使用场景中，不同视频可能需要不同的进度条展示规则，比如部分视频需要隐藏进度条禁止拖拽，部分视频需要保留进度条方便用户操作，此时就需要实现进度条的独立控制。
核心实现思路
Video.js的每个播放器实例都有独立的控制栏组件，进度条属于控制栏的子组件，我们可以通过操作单个实例的控制栏配置或者动态修改组件状态，来实现不同视频进度条的独立管控，不会影响其他实例。
方法一：初始化时配置进度条显示状态
在创建Video.js实例时，可以通过controlBar配置项单独设置每个实例的进度条是否显示，这种方式适合初始化就确定进度条状态的场景。
// 第一个视频实例，显示进度条
const player1 = videojs('video1', {
controlBar: {
// 进度条组件配置，设为true显示，false隐藏
progressControl: true
}
});
// 第二个视频实例，隐藏进度条
const player2 = videojs('video2', {
controlBar: {
progressControl: false
}
});
方法二：运行时动态切换进度条状态
如果需要在视频播放过程中动态修改某个实例的进度条显示状态，可以通过获取实例的控制栏组件，调用对应的显示隐藏方法实现。
// 获取第一个视频的进度条组件 const progressControl1 = player1.controlBar.progressControl; // 隐藏第一个视频的进度条 progressControl1.hide(); // 获取第二个视频的进度条组件 const progressControl2 = player2.controlBar.progressControl; // 显示第二个视频的进度条 progressControl2.show();
方法三：通过CSS样式独立控制
如果需要更灵活的样式控制，也可以给不同的Video.js实例添加独立的类名，通过CSS单独设置进度条的显示隐藏，这种方式适合需要批量控制或者结合其他样式调整的场景。
<video id="video1" class="video-js vjs-default-skin custom-video-1"></video> <video id="video2" class="video-js vjs-default-skin custom-video-2"></video>
/* 隐藏第一个视频的进度条 */
.custom-video-1 .vjs-progress-control {
display: none;
}
/* 显示第二个视频的进度条，默认就是显示，这里仅作示例 */
.custom-video-2 .vjs-progress-control {
display: flex;
}
注意事项
- 动态修改进度条状态时，要确保对应的播放器实例已经完成初始化，避免获取不到组件报错。
- 隐藏进度条后，用户将无法通过拖拽进度条调整播放进度，如果需要保留进度调整能力，可以仅禁用进度条的拖拽事件，而不是完全隐藏组件。
- 如果使用了自定义的Video.js皮肤，进度条的class名称可能和默认皮肤不同，需要查看实际渲染的DOM结构调整对应的选择器。
完整示例代码
以下是一个包含两个视频实例，分别控制进度条显示隐藏的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Video.js多视频进度条独立控制</title>
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
</head>
<body>
<h3>视频1（隐藏进度条）</h3>
<video id="video1" class="video-js vjs-default-skin" width="600" height="300">
<source src="https://ipipp.com/sample-video1.mp4" type="video/mp4">
</video>
<h3>视频2（显示进度条）</h3>
<video id="video2" class="video-js vjs-default-skin" width="600" height="300">
<source src="https://ipipp.com/sample-video2.mp4" type="video/mp4">
</video>
<button onclick="toggleProgress1()">切换视频1进度条状态</button>
<button onclick="toggleProgress2()">切换视频2进度条状态</button>
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script>
// 初始化视频1，隐藏进度条
const player1 = videojs('video1', {
controlBar: {
progressControl: false
}
});
// 初始化视频2，显示进度条
const player2 = videojs('video2', {
controlBar: {
progressControl: true
}
});
// 切换视频1进度条显示隐藏
function toggleProgress1() {
const progressControl = player1.controlBar.progressControl;
if (progressControl.hasClass('vjs-hidden')) {
progressControl.show();
} else {
progressControl.hide();
}
}
// 切换视频2进度条显示隐藏
function toggleProgress2() {
const progressControl = player2.controlBar.progressControl;
if (progressControl.hasClass('vjs-hidden')) {
progressControl.show();
} else {
progressControl.hide();
}
}
</script>
</body>
</html>