akoo/akmon

Fork 0

Files

akoo 77a2bab985 Initial commit of akmon project

2026-01-20 08:04:15 +08:00

5.1 KiB

Raw Permalink Blame History

视频播放系统使用指南

系统概述

您的视频播放系统已经设计完成，包含以下核心功能：

✅ 视频播放、暂停、进度控制
✅ 弹幕实时发送和展示
✅ 多级评论系统
✅ 点赞、收藏、转发功能
✅ 视频设置（画质、速度、弹幕配置）
✅ 分享功能
✅ 完整的 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 创建所需的数据表和视图：

-- 在您的 PostgreSQL/Supabase 数据库中执行
\i video_system_database.sql

2. 导入视频页面

将 video-player.uvue 集成到您的应用路由中：

// pages.json
{
  "path": "pages/info/video-player",
  "style": {
    "navigationBarTitleText": "视频播放"
  }
}

3. 使用视频页面

// 跳转到视频播放页面
uni.navigateTo({
  url: `/pages/info/video-player?id=${videoId}`
})

核心功能说明

弹幕系统

弹幕与评论分开设计，具有以下特点：

实时性: 与视频时间轴绑定
自定义: 支持颜色、字体大小、位置设置
高性能: 独立的数据表和缓存机制

// 发送弹幕示例
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
  })
}

评论系统

支持多级回复的评论系统：

层级结构: 支持多级回复
点赞功能: 评论可以被点赞
举报机制: 支持举报不当评论

// 发表评论示例
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'

// 点赞视频示例
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() 函数处理：

// 使用示例
<text>{{ tt('mt.video.danmu.placeholder') }}</text>
<text>{{ tt('mt.comment.postSuccess') }}</text>
<text>{{ tt('mt.share.title') }}</text>

扩展建议

1. 后端 API 优化

实现弹幕实时推送 (WebSocket)
添加弹幕内容过滤和审核
优化评论分页加载

2. 前端优化

弹幕性能优化 (虚拟滚动)
视频播放记录同步
离线缓存支持

3. 管理功能

弹幕管理后台
评论审核系统
用户举报处理

4. 高级功能

弹幕词云分析
智能推荐系统
社交分享优化

注意事项

性能考虑: 弹幕数据量大，需要合理的分页和缓存策略
安全性: 实现内容过滤和用户权限控制
兼容性: 确保在不同平台上的播放器兼容性
用户体验: 优化加载速度和交互响应

总结

您的视频播放系统设计已经非常完整和专业，涵盖了现代视频平台的核心功能。通过合理的数据库设计、类型安全的前端代码和完整的多语言支持，为用户提供了优秀的视频观看体验。

下一步建议：

部署数据库结构
配置 Supabase RLS 策略
联调前后端接口
进行多端测试
根据实际需求调整 UI 细节

5.1 KiB Raw Permalink Blame History Unescape Escape