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