以下是为GIFPlayer设计的完整使用文档模板：

# GIFPlayer 

基于 Canvas 的 GIF 播放器，支持速度控制、自动播放等特性。

## 安装

```bash
npm install gif-player-js

或直接引入脚本：

<script src="path/to/gif-player.js"></script>

快速开始

import GIFPlayer from 'gif-player';

// 初始化（需提供 canvas 元素或自动创建）
const player = new GIFPlayer({
  canvas: document.getElementById('my-canvas'), // 可选
  width: 300,   // 可选宽度
  height: 200,  // 可选高度
  autoplay: true, // 默认 true
  playbackRate: 1 // 初始速度 (0.5-8)
});

// 加载 GIF 文件
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  await player.loadFile(e.target.files[0]);
});

配置选项

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | canvas | HTMLCanvasElement | 自动创建 | 渲染目标画布 | | width | number | GIF 原宽 | 画布宽度 | | height | number | GIF 原高 | 画布高度 | | autoplay | boolean | true | 加载后自动播放 | | playbackRate | number | 1 | 播放速度 (0.5-8) | | minRate | number | 0.5 | 最低速度 | | maxRate | number | 8 | 最高速度 | | onRateChange | function | null | 速度变化回调 |

API 方法

核心控制

player.play();    // 开始播放
player.stop();    // 停止播放
player.toggle();  // 切换播放/暂停状态

速度控制

player.speedUp();      // 加速 (默认2倍步长)
player.speedDown();    // 减速
player.setPlaybackRate(2); // 设置具体速度值

其他

player.loadFile(file); // 加载新文件（File 对象）

示例场景

1. 速度控制 UI

<button onclick="player.speedUp()">加速</button>
<button onclick="player.speedDown()">减速</button>
<span id="speed-display">1x</span>

<script>
  new GIFPlayer({
    onRateChange: (rate) => {
      document.getElementById('speed-display').textContent = `${rate}x`;
    }
  });
</script>

2. 动态创建画布

// 不传入 canvas 参数时会自动创建
const player = new GIFPlayer();
document.body.append(player.canvas); // 可获取自动创建的画布

浏览器兼容性

需要支持 ImageDecoder API 的现代浏览器：

• Chrome ≥ 94
• Edge ≥ 94
• Firefox 部分支持

开发建议

// 错误处理示例
try {
  await player.loadFile(file);
} catch (err) {
  console.error('加载失败:', err);
  alert('不支持的文件格式');
}

License

MIT

---

### 文档亮点说明：
1. **模块化展示**：分安装、配置、API、示例等章节
2. **兼容性提示**：明确标注 API 依赖和浏览器要求
3. **实时交互示例**：提供可直接复用的代码片段
4. **错误处理指引**：示范如何捕获解码错误

需要调整任何部分或补充其他使用场景可以随时告诉我。