Greasy Fork is available in English.
优化 YouTube 进度条显示效果
这是一个用于增强 YouTube 视频进度条显示效果的油猴(Tampermonkey)脚本。让我为你详细介绍其主要功能和特点：
### 1. 基本信息
这个脚本可以在 YouTube 主站和嵌入式播放器中使用。
### 2. 主要功能
1. **自定义进度条样式**
```javascript
const CONFIG = {
barHeight: '3px', // 进度条高度
barColor: '#f00', // 进度条颜色(红色)
bufferColor: 'rgba(255,255,255,.4)', // 缓冲条颜色
backgroundColor: 'rgba(255,255,255,.2)', // 背景颜色
adColor: '#fc0', // 广告时的颜色(黄色)
transitionDuration: '0.25s' // 动画过渡时间
};
```
2. **核心特性**
- 始终显示进度条（即使播放器控件隐藏）
- 显示视频缓冲进度
- 广告播放时自动切换颜色
- 平滑的动画过渡效果
### 3. 技术实现
使用了面向对象的方式实现，主要包含以下部分：
1. **样式管理**
```javascript
createStyles() {
// 创建自定义样式
// 使用 CSS transform 实现进度更新
// 支持动画过渡效果
}
```
2. **进度条创建**
```javascript
initProgressBar() {
// 创建进度条容器
// 创建播放进度元素
// 创建缓冲进度元素
}
```
3. **事件监听**
```javascript
bindEvents() {
// 监听视频播放进度
// 监听缓冲状态
// 监听广告状态
}
```
### 4. 特点优势
1. **性能优化**
- 使用 transform 代替 width 实现进度更新
- 使用 MutationObserver 监听 DOM 变化
- 避免频繁 DOM 操作
2. **可维护性**
- 配置项集中管理
- 类封装，结构清晰
- 代码注释完善
3. **用户体验**
- 平滑的动画效果
- 视觉反馈清晰
- 不影响原有功能
### 使用方法
1. 安装 Tampermonkey 插件
2. 创建新脚本
3. 复制此代码
4. 保存并启用
### 自定义修改
如果想要修改样式，只需要调整 CONFIG 对象中的值：
```javascript
const CONFIG = {
barHeight: '5px', // 改变高度
barColor: '#00ff00', // 改变颜色为绿色
// ...其他配置
};
```
这个脚本设计合理，易于使用和维护，是一个很好的 YouTube 体验增强工具。
