# CKPlayer 视频播放器集成说明

## 🎯 概述

已成功将项目中的VideoPlayer组件从原生HTML5 video + HLS.js 替换为 CKPlayer 播放器，并集成了public文件夹中的本地视频播放功能。

## 📁 文件结构

```
public/
├── ckplayer/                 # CKPlayer播放器文件
│   ├── css/                  # 样式文件
│   ├── js/                   # 核心JS文件
│   ├── hls.js/              # HLS支持
│   └── language/            # 语言包
└── video/
    └── first.mp4            # 本地视频文件

src/
├── components/
│   └── VideoPlayer.vue      # 更新后的视频播放器组件
├── views/
│   ├── LocalVideoDemo.vue   # 本地视频演示页面
│   └── CourseStudy.vue      # 课程学习页面
└── router/
    └── index.ts             # 路由配置
```

## 🔧 主要更改

### 1. VideoPlayer组件重构

- **替换播放器**: 从HTML5 video + HLS.js 改为 CKPlayer
- **新增功能**: 支持本地视频播放 (`useLocalVideo` prop)
- **保持兼容**: 保留原有的props和events接口
- **动态加载**: 自动加载CKPlayer脚本和样式

### 2. 新增Props

```typescript
interface Props {
  videoUrl?: string           // 视频URL
  title?: string             // 视频标题
  description?: string       // 视频描述
  poster?: string           // 封面图
  autoplay?: boolean        // 自动播放
  showControls?: boolean    // 显示控制栏
  placeholder?: string      // 占位符文本
  useLocalVideo?: boolean   // 使用本地视频 (新增)
}
```

### 3. 本地视频支持

当 `useLocalVideo` 为 `true` 时，组件会自动播放 `/video/first.mp4` 文件。

## 🚀 使用方法

### 基本用法

```vue
<template>
  <VideoPlayer
    :video-url="videoUrl"
    title="视频标题"
    description="视频描述"
    :autoplay="false"
    :show-controls="true"
    @play="onPlay"
    @pause="onPause"
    @ended="onEnded"
    @error="onError"
  />
</template>
```

### 播放本地视频

```vue
<template>
  <VideoPlayer
    :use-local-video="true"
    title="本地视频"
    description="来自public/video/first.mp4的本地视频"
    :autoplay="false"
    :show-controls="true"
  />
</template>
```

### 支持的视频格式

- **MP4**: 直接播放
- **HLS (.m3u8)**: 使用hls.js插件
- **本地文件**: public/video/目录下的视频文件

## 📱 演示页面

### 本地视频演示页面
- 路径: `/local-video-demo`
- 功能: 专门演示本地视频播放
- 包含: 播放控制、状态显示、技术说明

## 🎮 控制方法

组件暴露的方法：

```typescript
// 播放控制
play()                    // 播放视频
pause()                   // 暂停视频
seek(time: number)        // 跳转到指定时间
setVolume(volume: number) // 设置音量 (0-100)
retry()                   // 重试加载
```

## 📊 事件回调

```typescript
@play     // 开始播放
@pause    // 暂停播放
@ended    // 播放结束
@timeupdate // 时间更新
@error    // 播放错误
```

## 🔄 迁移指南

### 从旧版VideoPlayer迁移

1. **无需更改**: 现有的props和events保持兼容
2. **新功能**: 可选择使用 `useLocalVideo` 播放本地视频
3. **性能提升**: CKPlayer提供更好的播放性能和兼容性

### 示例迁移

```vue
<!-- 旧版本 -->
<VideoPlayer :video-url="url" />

<!-- 新版本 (完全兼容) -->
<VideoPlayer :video-url="url" />

<!-- 新版本 (使用本地视频) -->
<VideoPlayer :use-local-video="true" />
```

## 🛠️ 技术特性

- **自动脚本加载**: 动态加载CKPlayer资源
- **格式检测**: 自动识别视频格式并选择合适的播放方式
- **响应式设计**: 支持桌面端和移动端
- **错误处理**: 完善的错误处理和重试机制
- **内存管理**: 组件销毁时自动清理资源

## 🎨 样式定制

CKPlayer样式可通过CSS覆盖：

```css
:deep(.ckplayer) {
  /* 自定义播放器样式 */
}
```

## 📝 注意事项

1. **文件路径**: 本地视频文件需放在 `public/video/` 目录下
2. **跨域问题**: 外部视频URL需要支持跨域访问
3. **浏览器兼容**: CKPlayer支持现代浏览器
4. **性能优化**: 大视频文件建议使用CDN或流媒体服务

## 🔍 调试

开发时可以通过浏览器控制台查看详细的加载和播放日志：

```javascript
// 查看CKPlayer初始化日志
console.log('CKPlayer initialized successfully')

// 查看视频URL变化
console.log('VideoPlayer: 视频URL变化:', newUrl)
```

## 🚀 下一步

- 可以添加更多本地视频文件到 `public/video/` 目录
- 可以扩展组件支持播放列表功能
- 可以添加字幕支持
- 可以集成视频分析和统计功能