🏠 

Greasy Fork is available in English.

YouTube 进度条增强

优化 YouTube 进度条显示效果


安装此脚本?

作者
le jin
日安装量
0
总安装量
20
评分
0 0 0
版本
1.0.0
创建于
2024-12-14
更新于
2024-12-14
大小
4.6 KB
许可证
MIT
适用于

这是一个用于增强 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 体验增强工具。