# MVideo-template

**Repository Path**: qiustudio/mvideo_template

## Basic Information

- **Project Name**: MVideo-template
- **Description**: 采用template构建的mvideo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# QiuVideo 视频播放器

一个基于自定义HTML模板构建的现代视频播放器。

## 架构特点

本播放器采用模板驱动的架构设计，具有以下特点：

1. **模板化构建**：播放器界面完全通过HTML模板定义，支持动态配置和定制
2. **组件化设计**：将播放器功能拆分为多个独立组件，职责明确
3. **样式分离**：每个组件的CSS样式独立存储在单独的文件中
4. **自定义元素**：基于Web Components技术实现，使用`<qiu-video-player>`标签即可使用

## 核心架构

### 1. 模板系统
- `src/template/player.html` - 播放器主模板
- `src/template/templateEngine.ts` - 模板渲染引擎
- `src/template/templateLoader.ts` - 模板加载器

### 2. 组件结构
- `qiu-video-player` - 播放器主组件，负责整体协调
- `qiu-video-controls` - 控制面板组件
- `qiu-video-settings` - 设置面板组件
- `qiu-video-context-menu` - 右键菜单组件
- `qiu-video-subtitles` - 字幕组件

### 3. 样式文件
- `src/css/player.css` - 主样式
- `src/css/qiu-video-controls.css` - 控制面板样式
- `src/css/qiu-video-settings.css` - 设置面板样式
- `src/css/qiu-video-context-menu.css` - 右键菜单样式

## 使用方法

### 1. 基本使用

```html
<div id="video-container"></div>
<script>
  // 方法1：使用便捷函数初始化
  const player = initPlayer('video-container', {
    url: '/path/to/video.mp4',
    poster: '/path/to/poster.jpg',
    controls: true,
    autoplay: false,
    loop: false,
    muted: false
  });
  
  // 方法2：使用自定义元素
  const playerElement = document.createElement('qiu-video-player');
  playerElement.setAttribute('data-url', '/path/to/video.mp4');
  playerElement.setAttribute('data-poster', '/path/to/poster.jpg');
  document.getElementById('video-container').appendChild(playerElement);
  
  // 方法3：使用data属性自动初始化
  // <div data-qiu-video data-qiu-video-src="/path/to/video.mp4"></div>
</script>
```

### 2. 配置选项

| 选项 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| url | string | '' | 视频源URL |
| poster | string | '' | 视频封面图URL |
| autoplay | boolean | false | 是否自动播放 |
| loop | boolean | false | 是否循环播放 |
| muted | boolean | false | 是否静音 |
| volume | number | 1.0 | 音量(0-1) |
| theme | string | '#FF5722' | 主题色 |
| controls | boolean | true | 是否显示控制面板 |
| contextMenu | Array | [] | 自定义右键菜单 |
| isLiveStream | boolean | false | 是否为直播流 |
| streamType | string | 'auto' | 流类型(hls/dash/webrtc/flv/auto) |

## 构建流程

1. 预加载HTML模板
2. 将模板转换为JS对象
3. 通过用户参数进行动态配置
4. 将配置应用到模板中渲染出最终界面
5. 组件与渲染后的DOM元素绑定，负责逻辑处理

## 开发说明

1. 组件只负责逻辑处理，不包含DOM创建代码
2. 所有UI结构通过模板定义
3. 样式文件与组件分离，便于维护
4. 组件通过事件系统进行通信

## 浏览器兼容性

支持所有现代浏览器(Chrome, Firefox, Safari, Edge)，IE浏览器不支持。