# ai-video

**Repository Path**: ai-project_7/ai-video

## Basic Information

- **Project Name**: ai-video
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-08
- **Last Updated**: 2025-12-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 视频播放网站

一个基于 Nuxt3 开发的现代化视频播放网站，提供完整的自定义视频播放器功能，支持播放、暂停、音量控制、全屏切换等核心功能，完美适配移动端 H5。

## ✨ 特性

- 🎬 完整的自定义视频播放器
- 📱 完美的移动端适配
- ⌨️ 丰富的键盘快捷键
- 🎨 流畅的页面过渡动画
- 💾 播放进度和历史持久化
- 📊 视频播放统计功能
- 🔍 实时视频搜索
- 🎯 响应式设计

# 技术依赖
- nuxt3
- typescript
- pinia
- unocss
- pnpm
- node:20.19.0

# 快速开始

## 安装依赖
```bash
pnpm install
```

## 开发运行
```bash
pnpm dev
```

## 构建生产版本
```bash
pnpm build
```

## 预览生产版本
```bash
pnpm preview
```

# 项目结构
```
cursor-demo/
├── assets/              # 静态资源
│   └── css/            # 样式文件
├── components/          # Vue 组件
│   ├── VideoPlayer.vue # 自定义视频播放器组件
│   ├── LoadingSpinner.vue # 加载动画组件
│   ├── VideoSearch.vue # 视频搜索组件
│   ├── AppNavigation.vue # 全局导航组件
│   └── VideoCardSkeleton.vue # 视频卡片骨架屏
├── composables/        # 组合式函数
│   ├── useVideoPlayer.ts
│   ├── useFormatTime.ts # 时间格式化
│   ├── useErrorHandler.ts # 错误处理
│   └── useViewTransition.ts # ViewTransition API
├── pages/              # 页面路由
│   ├── index.vue      # 首页
│   ├── history.vue    # 播放历史页面
│   └── videos/
│       ├── index.vue   # 视频列表页面
│       └── player.vue # 视频播放页面
├── stores/             # Pinia 状态管理
│   └── videoStore.ts  # 视频状态管理
├── utils/              # 工具函数
│   ├── formatTime.ts  # 时间格式化
│   ├── errorHandler.ts # 错误处理
│   └── animation.ts   # 动画工具
├── types/              # TypeScript 类型定义
│   └── video.d.ts
├── plugins/            # Nuxt 插件
│   └── view-transition.client.ts # ViewTransition 插件
├── app.vue             # 应用根组件
├── app.config.ts       # 应用配置
├── nuxt.config.ts      # Nuxt 配置
├── uno.config.ts       # UnoCSS 配置
└── package.json        # 项目依赖
```

# 功能特性

## 视频播放器组件 (VideoPlayer)
- ✅ 播放/暂停控制（鼠标点击、键盘快捷键、触摸）
- ✅ 音量控制（支持滑块和静音、键盘快捷键）
- ✅ 全屏切换（支持各浏览器、键盘快捷键）
- ✅ 自定义进度条（支持点击跳转和悬停预览、键盘快捷键）
- ✅ 播放速度控制（0.5x - 2x）
- ✅ 时间显示（当前时间/总时长）
- ✅ 移动端适配（触摸控制、响应式布局）
- ✅ 控制栏自动隐藏（播放时3秒后隐藏）
- ✅ 加载状态显示
- ✅ 错误处理和重试机制
- ✅ 键盘快捷键完整支持

## 页面功能
- ✅ 首页（快速体验、功能说明）
- ✅ 视频列表页面（网格布局、播放历史标记、搜索功能）
- ✅ 视频播放详情页面
- ✅ 播放历史页面（查看观看记录、清空历史）
- ✅ ViewTransition API 支持（页面丝滑跳转）
- ✅ 响应式设计（移动端和桌面端适配）

## 导航和搜索
- ✅ 全局导航栏（响应式、移动端菜单）
- ✅ 视频搜索功能（实时搜索、下拉结果）
- ✅ 播放历史记录（自动记录、快速访问）

## 键盘快捷键（参考 Video.js 标准）
- `空格键` / `K键`: 播放/暂停
- `F键`: 全屏切换
- `P键`: 画中画模式（如果支持）
- `M键`: 静音切换
- `←` / `→`: 快进/快退 10 秒
- `Shift + ←` / `Shift + →`: 快进/快退 30 秒
- `↑` / `↓`: 音量增减
- `0-9` 数字键: 跳转到对应百分比位置（0=0%, 1=10%, ..., 9=90%）
- `Home键`: 跳转到视频开始
- `End键`: 跳转到视频结束

## 移动端手势
- **短按**: 播放/暂停
- **水平滑动**: 调节播放进度（左右滑动）
- **垂直滑动**: 调节音量（上下滑动，向上增加，向下减少）
- **拖动反馈**: 实时显示进度或音量值

## 新增功能（参考 Video.js 优化）
- ✅ **智能加载状态管理**: 区分 loading、seeking、buffering 状态
- ✅ **画中画模式**: 支持 Picture-in-Picture API
- ✅ **缓冲进度显示**: 实时显示视频缓冲进度和百分比
- ✅ **增强的键盘快捷键**: 支持更多快捷键操作（数字键跳转、Home/End 等）
- ✅ **优化的缓冲提示**: 缓冲时显示详细状态和进度

# 文献参考
video mdn 链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video
viewTransiton mdn实现页面丝滑跳转：https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition

# 规范

### 1. Props 规范

// ✅ 推荐：使用 TypeScript interface
interface Props {
  // 必需属性
  title: string
  count: number
  
  // 可选属性
  description?: string
  
  // 联合类型
  size?: 'small' | 'medium' | 'large'
  
  // 对象类型
  user?: {
    id: number
    name: string
  }
  
  // 数组类型
  items?: Array<{ id: number; text: string }>
}

// 使用默认值
const props = withDefaults(defineProps<Props>(), {
  description: '',
  size: 'medium',
  items: () => []
})

### 2. 组件命名

// ✅ 多单词组件名（避免与 HTML 元素冲突）
components/UserProfile.vue
components/ImageUploader.vue
components/PaymentDialog.vue

// ❌ 避免单个单词
components/User.vue
components/Image.vue
components/Dialog.vue

// ✅ 组件文件使用 PascalCase
components/ai-video/TemplateCard.vue

// ❌ 避免 kebab-case 文件名
components/ai-video/template-card.vue

### 3. UnoCSS 优先

<template>
  <!-- ✅ 优先使用 UnoCSS 原子类 -->
  <div class="flex items-center justify-between px-4 py-2 bg-blue-500 text-white">
    内容
  </div>
  
  <!-- ✅ 复杂样式使用 scoped CSS -->
  <div class="custom-component">
    特殊样式
  </div>
</template>

<style scoped>
.custom-component {
  background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
}
</style>

---

### 4. 响应式设计

<template>
  <!-- ✅ 使用 UnoCSS 响应式前缀 -->
  <div class="px-4 sm:px-6 md:px-8 lg:px-12">
    <!-- 移动端 16px, 小屏 24px, 中屏 32px, 大屏 48px -->
  </div>
  
  <!-- ✅ 使用响应式类 -->
  <div class="flex-col sm:flex-row">
    <!-- 移动端垂直，桌面端水平 -->
  </div>
</template>


### 5. 文件命名

# ✅ 组件文件 - PascalCase
components/UserProfile.vue
components/ImageUploader.vue
components/PaymentDialog.vue

# ✅ Composables - camelCase
composables/useImageUpload.ts
composables/useFacebookPixel.ts

# ✅ Utils - camelCase
utils/formatDate.ts
utils/validateEmail.ts

# ✅ Stores - camelCase
stores/globalStore.ts
stores/paymentStore.ts

# ✅ 类型定义 - PascalCase 或 camelCase
types/User.ts
types/api.d.ts

## 注释规范

### 1. 文件头注释

/**
 * @file 用户资料组件
 * @description 显示和编辑用户个人信息
 * @author Your Name
 * @date 2025-10-17
 */

### 2. 函数注释
/**
 * 格式化日期为指定格式
 * @param date - 要格式化的日期
 * @param format - 日期格式，默认 'YYYY-MM-DD'
 * @returns 格式化后的日期字符串
 * @example
 * formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
 * // => '2025-10-17 14:30:00'
 */
const formatDate = (date: Date, format = 'YYYY-MM-DD'): string => {
  // 实现...
}

### 3. 复杂逻辑注释

// ✅ 为复杂逻辑添加注释
const processImage = async (file: File) => {
  // 1. 验证文件格式和大小
  if (!validateFile(file)) {
    throw new Error('Invalid file')
  }
  
  // 2. 压缩图片（如果超过 2MB）
  const compressedFile = file.size > 2 * 1024 * 1024
    ? await compressImage(file)
    : file
  
  // 3. 上传到服务器
  const uploadResult = await uploadFile(compressedFile)
  
  // 4. 返回处理结果
  return uploadResult
}

// ❌ 避免显而易见的注释
const count = 0  // 定义 count 变量

---

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！

## 更新日志

详细的更新日志请查看 [CHANGELOG.md](./CHANGELOG.md)