GoCo/OL-LearnPlatform

Fork 0

username af756a13e2 第一版学生端页面

2025-08-04 02:13:12 +08:00

4.7 KiB

Raw Blame History

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

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 文件。

🚀 使用方法

基本用法

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

播放本地视频

<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
功能: 专门演示本地视频播放
包含: 播放控制、状态显示、技术说明

🎮 控制方法

组件暴露的方法：

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

📊 事件回调

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

🔄 迁移指南

从旧版VideoPlayer迁移

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

示例迁移

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

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

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

🛠️ 技术特性

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

🎨 样式定制

CKPlayer样式可通过CSS覆盖：

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

📝 注意事项

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

🔍 调试

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

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

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

🚀 下一步

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

4.7 KiB Raw Blame History Unescape Escape