# 流媒体视频

**Repository Path**: ls007player/streaming-video

## Basic Information

- **Project Name**: 流媒体视频
- **Description**: 流媒体视频关键帧检测
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-10
- **Last Updated**: 2025-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# H5视频帧检测器

一个基于Vue 3 + Vite的H5视频播放和帧检测工具，可以在视频播放到特定帧时显示信息。

## 功能特点

- 🎬 视频播放控制（播放、暂停、进度条）
- 📊 实时显示当前帧数、总帧数、播放时间
- 🎯 设置特定帧触发点，播放到这些帧时显示信息
- 📁 支持本地视频文件上传
- ⚙️ 可配置的帧检测参数（容差范围等）
- 📱 响应式设计，支持移动端

## 技术栈

- Vue 3
- Vite
- HTML5 Video API
- JavaScript

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000 查看应用

### 3. 构建生产版本

```bash
npm run build
```

### 4. 预览构建结果

```bash
npm run preview
```

## 使用方法

### 基本使用

1. **自动加载测试视频**：应用会自动加载 `video/安泰路夜间灯杆巡检80_2025-08-15-224603_gt.avi` 作为测试视频

2. **播放视频**：点击播放按钮开始播放，视频信息会实时显示在下方

3. **帧检测**：
   - 默认设置了帧 50、100、150、200 为检测点
   - 当视频播放到这些帧时，会弹出信息提示
   - 可以自定义添加新的目标帧

### 功能说明

#### 视频信息显示
- **当前帧数**：实时显示当前播放到的帧
- **总帧数**：根据视频时长和帧率计算
- **当前时间**：当前播放时间（格式：MM:SS）
- **总时长**：视频总时长
- **帧率**：视频的帧率（默认25fps）

#### 帧触发设置
- **目标帧数**：设置要检测的帧数
- **容差范围**：允许的误差范围（例如设置为2，则在目标帧±2帧范围内都会触发）
- **添加目标帧**：将设置的目标帧添加到检测列表

#### 视频选择
- 支持上传本地视频文件
- 文件选择器支持所有视频格式

### 技术实现

#### 帧计算原理
```javascript
// 帧数 = 当前时间 × 帧率
currentFrame = Math.floor(currentTime * frameRate)

// 总帧数 = 总时长 × 帧率  
totalFrames = Math.floor(duration * frameRate)
```

#### 帧检测逻辑
```javascript
// 检查是否到达目标帧
for (let targetFrame of targetFrames) {
  if (Math.abs(this.currentFrame - targetFrame) <= tolerance) {
    this.showFrameInfo = true
    this.showFrameInfoForDuration(2000) // 显示2秒
    break
  }
}
```

#### 视频事件监听
- `loadedmetadata`：视频元数据加载完成
- `timeupdate`：播放时间更新（用于帧检测）
- `play`：视频开始播放
- `pause`：视频暂停

## 项目结构

```
H5-video-test/
├── public/
│   └── video/              # 视频文件目录（符号链接）
│       └── 安泰路夜间灯杆巡检80_2025-08-15-224603_gt.avi
├── src/
│   ├── main.js            # 应用入口
│   └── App.vue            # 主组件
├── package.json           # 项目配置
├── vite.config.js         # Vite配置
└── index.html            # HTML模板
```

## 自定义配置

### 修改默认帧率
在 `App.vue` 的 `data()` 中修改 `frameRate` 值：

```javascript
frameRate: 30 // 改为30fps
```

### 修改默认目标帧
在 `App.vue` 的 `data()` 中修改 `targetFrames` 数组：

```javascript
targetFrames: [25, 75, 125, 175] // 自定义目标帧
```

### 修改显示时长
在 `checkTargetFrames` 方法中修改显示时长：

```javascript
this.showFrameInfoForDuration(3000) // 改为3秒
```

## 浏览器兼容性

- Chrome 4+
- Firefox 3.5+
- Safari 4+
- Edge 12+
- IE 9+（部分功能）

## 注意事项

1. **视频格式**：建议使用MP4格式以获得更好的浏览器兼容性
2. **帧率检测**：自动帧率检测可能不够准确，可以根据实际视频手动设置
3. **性能优化**：频繁的时间更新事件可能影响性能，可以根据需要调整检测频率
4. **移动端**：在移动设备上测试时注意视频自动播放策略

## 扩展功能建议

- 添加帧截图功能
- 支持多个视频文件管理
- 添加帧标记和注释功能
- 支持帧导出为图片
- 添加帧跳转功能
- 支持键盘快捷键控制

## 许可证

MIT License