# 视频播放系统使用指南 ## 系统概述 您的视频播放系统已经设计完成,包含以下核心功能: - ✅ 视频播放、暂停、进度控制 - ✅ 弹幕实时发送和展示 - ✅ 多级评论系统 - ✅ 点赞、收藏、转发功能 - ✅ 视频设置(画质、速度、弹幕配置) - ✅ 分享功能 - ✅ 完整的 i18n 多语言支持 - ✅ 响应式设计和错误处理 ## 文件结构 ``` h:\blews\akmon\ ├── video_system_database.sql # 数据库结构 ├── pages/info/video-types.uts # TypeScript 类型定义 ├── pages/info/video-player.uvue # 主视频播放页面 ├── pages/info/comments.uvue # 评论组件 ├── pages/mt/video.uvue # 简化版视频页面 └── i18n/ # 多语言文件 ├── zh-CN/mt/common.uts # 中文多语言 └── en-US/mt/common.uts # 英文多语言 ``` ## 快速开始 ### 1. 部署数据库 执行 `video_system_database.sql` 创建所需的数据表和视图: ```sql -- 在您的 PostgreSQL/Supabase 数据库中执行 \i video_system_database.sql ``` ### 2. 导入视频页面 将 `video-player.uvue` 集成到您的应用路由中: ```javascript // pages.json { "path": "pages/info/video-player", "style": { "navigationBarTitleText": "视频播放" } } ``` ### 3. 使用视频页面 ```javascript // 跳转到视频播放页面 uni.navigateTo({ url: `/pages/info/video-player?id=${videoId}` }) ``` ## 核心功能说明 ### 弹幕系统 弹幕与评论分开设计,具有以下特点: - **实时性**: 与视频时间轴绑定 - **自定义**: 支持颜色、字体大小、位置设置 - **高性能**: 独立的数据表和缓存机制 ```typescript // 发送弹幕示例 const sendDanmu = async () => { const danmuData = { text: "弹幕内容", time_point: currentTime, color: "#FF0000", font_size: 25, position_type: "scroll" } await supa.from('ak_video_danmakus').insert({ content_id: videoId, user_id: userId, ...danmuData }) } ``` ### 评论系统 支持多级回复的评论系统: - **层级结构**: 支持多级回复 - **点赞功能**: 评论可以被点赞 - **举报机制**: 支持举报不当评论 ```typescript // 发表评论示例 const postComment = async () => { await supa.from('ak_content_comments').insert({ content_id: videoId, user_id: userId, content: commentText, parent_id: null // 主评论 }) } ``` ### 用户交互 统一的用户交互表设计: - **点赞**: `interaction_type: 'like'` - **收藏**: `interaction_type: 'favorite'` - **分享**: `interaction_type: 'share'` - **观看**: `interaction_type: 'view'` ```typescript // 点赞视频示例 const toggleLike = async () => { if (isLiked) { await supa.from('ak_user_interactions') .delete() .eq('user_id', userId) .eq('content_id', videoId) .eq('interaction_type', 'like') } else { await supa.from('ak_user_interactions') .insert({ user_id: userId, content_id: videoId, interaction_type: 'like' }) } } ``` ## 数据库设计亮点 ### 1. 弹幕表 (ak_video_danmakus) - `time_point`: 精确到毫秒的时间点 - `color`, `font_size`, `position_type`: 弹幕样式 - `status`: 支持审核状态 ### 2. 评论表 (ak_content_comments) - `parent_id`: 支持多级回复 - `reply_to_user_id`: 回复目标用户 - `is_pinned`: 支持置顶评论 ### 3. 统计表 (ak_content_statistics) - 自动触发器维护各种计数 - 缓存热点数据,提高查询性能 ### 4. 视图设计 - `vw_video_content_detail`: 视频详情视图 - `vw_video_danmakus`: 弹幕列表视图 - `vw_content_comments`: 评论树形视图 ## 多语言集成 系统完全支持 i18n,所有用户界面文本都通过 `tt()` 函数处理: ```typescript // 使用示例 {{ tt('mt.video.danmu.placeholder') }} {{ tt('mt.comment.postSuccess') }} {{ tt('mt.share.title') }} ``` ## 扩展建议 ### 1. 后端 API 优化 - 实现弹幕实时推送 (WebSocket) - 添加弹幕内容过滤和审核 - 优化评论分页加载 ### 2. 前端优化 - 弹幕性能优化 (虚拟滚动) - 视频播放记录同步 - 离线缓存支持 ### 3. 管理功能 - 弹幕管理后台 - 评论审核系统 - 用户举报处理 ### 4. 高级功能 - 弹幕词云分析 - 智能推荐系统 - 社交分享优化 ## 注意事项 1. **性能考虑**: 弹幕数据量大,需要合理的分页和缓存策略 2. **安全性**: 实现内容过滤和用户权限控制 3. **兼容性**: 确保在不同平台上的播放器兼容性 4. **用户体验**: 优化加载速度和交互响应 ## 总结 您的视频播放系统设计已经非常完整和专业,涵盖了现代视频平台的核心功能。通过合理的数据库设计、类型安全的前端代码和完整的多语言支持,为用户提供了优秀的视频观看体验。 下一步建议: 1. 部署数据库结构 2. 配置 Supabase RLS 策略 3. 联调前后端接口 4. 进行多端测试 5. 根据实际需求调整 UI 细节