191 lines
4.7 KiB
Markdown
191 lines
4.7 KiB
Markdown
# 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/` 目录
|
||
- 可以扩展组件支持播放列表功能
|
||
- 可以添加字幕支持
|
||
- 可以集成视频分析和统计功能
|