# MVideo

**Repository Path**: qiustudio/mvideo

## Basic Information

- **Project Name**: MVideo
- **Description**: 一个正在探索的视频播放器项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://qiumonster.com/mvideo
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-27
- **Last Updated**: 2025-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# QiuVideo - AI视频播放器

一款基于TypeScript开发的AI视频播放器组件，可以编译成单一JS文件，直接引入即可使用。

## 项目结构

```
QiuVideo/
├── public/             # 静态资源目录
│   └── index.html      # 演示页面
├── src/                # 源代码目录
│   ├── components/     # 组件目录
│   │   ├── VideoPlayer.ts    # 视频播放器组件
│   │   └── AIController.ts   # AI功能控制器
│   ├── index.ts        # 主入口文件
│   ├── types.ts        # 类型定义文件
│   └── example.ts      # 使用示例
├── test/               # 测试目录
│   └── VideoPlayer.test.ts   # 单元测试
├── package.json        # 项目配置和依赖
├── tsconfig.json       # TypeScript配置
├── webpack.config.js   # Webpack配置
└── README.md           # 项目说明
```

## 功能特性

- **基础视频播放**：支持播放、暂停、进度控制、音量调节等基本功能
- **AI增强功能**：
  - 自动生成字幕
  - 视频内容摘要
  - 关键词提取
  - 实体识别
- **组件化设计**：模块化结构，易于扩展和维护
- **TypeScript支持**：完整的类型定义，提供良好的开发体验
- **单一文件输出**：编译后生成单一JS文件，方便引入使用

## 安装与使用

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 运行测试

```bash
npm test
```

### 直接引入使用

构建完成后，可以在HTML中直接引入生成的JS文件：

```html
<script src="dist/qiu-video.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 等待QiuVideo加载完成
    window.addEventListener('QiuVideoLoaded', function() {
      // 创建播放器实例
      const player = new QiuVideo('#video-player', {
        width: '800px',
        height: '450px',
        controls: true,
        aiConfig: {
          enabled: true,
          autoGenerateSubtitles: true
        }
      });

      // 加载视频
      player.loadVideo('your-video-url.mp4');

      // 播放控制
      document.getElementById('play-button').addEventListener('click', function() {
        player.togglePlay();
      });
    });
  });
</script>

<div id="video-player"></div>
<button id="play-button">播放/暂停</button>
```

## API参考

### QiuVideo 类

#### 构造函数

```typescript
constructor(container: string | HTMLElement, config?: PlayerConfig)
```

#### 主要方法

- `loadVideo(src: string)`: 加载视频
- `play()`: 播放视频
- `pause()`: 暂停视频
- `togglePlay()`: 切换播放状态
- `seek(time: number)`: 设置播放进度
- `setVolume(volume: number)`: 设置音量(0-1)
- `enableAI()`: 启用AI功能
- `disableAI()`: 禁用AI功能
- `destroy()`: 销毁播放器实例

#### 配置选项

```typescript
interface PlayerConfig {
  width?: number | string;        // 播放器宽度
  height?: number | string;       // 播放器高度
  autoplay?: boolean;             // 是否自动播放
  controls?: boolean;             // 是否显示控件
  loop?: boolean;                 // 是否循环播放
  muted?: boolean;                // 是否静音
  poster?: string;                // 视频封面
  aiConfig?: AIConfig;            // AI功能配置
}

interface AIConfig {
  enabled?: boolean;              // 是否启用AI功能
  apiKey?: string;                // AI API密钥
  autoGenerateSubtitles?: boolean; // 是否自动生成字幕
  autoSummarize?: boolean;        // 是否自动生成摘要
}
```

## 扩展开发

如需扩展功能，可以通过继承现有组件或添加新组件的方式实现。主要扩展点包括：

1. 在 `components` 目录下添加新组件
2. 在 `types.ts` 中定义相关类型
3. 在 `index.ts` 中导出新功能

## 注意事项

- 自动生成字幕和视频摘要功能在示例中为模拟实现，实际使用时需要接入真实的AI API
- 自动播放功能可能受浏览器策略限制，建议通过用户交互触发播放
- 在移动设备上使用时，请注意响应式设计和触摸交互优化

## 许可证

MIT