uniApp中实现视频播放与评论互动功能

在UniApp中实现视频播放与评论互动功能，需结合前端组件和云开发能力。以下是完整实现方案：

一、视频播放实现

使用<video>组件并添加交互控制：

<template>
  <view>
    <!-- 视频播放器 -->
    <video 
      id="myVideo"
      :src="videoUrl"
      controls
      autoplay
      @play="onPlay"
      @pause="onPause"
      style="width:100%;height:400rpx">
    </video>
    
    <!-- 视频信息 -->
    <view class="video-info">
      <text>{{ videoTitle }}</text>
      <view>👁️ {{ views }} · 👍 {{ likes }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: "https://example.com/sample.mp4",
      videoTitle: "UniApp开发教程",
      views: 2450,
      likes: 128,
      isPlaying: false
    }
  },
  methods: {
    onPlay() {
      this.isPlaying = true
      uni.$emit('video-status-change', true)
    },
    onPause() {
      this.isPlaying = false
      uni.$emit('video-status-change', false)
    }
  }
}
</script>

二、评论互动系统

1. 评论列表组件

<template>
  <view>
    <!-- 评论输入框 -->
    <view class="comment-input">
      <input 
        v-model="newComment" 
        placeholder="说点什么..."
        @confirm="postComment"
      />
      <button @click="postComment">发送</button>
    </view>

    <!-- 评论列表 -->
    <view v-for="(comment, index) in comments" :key="index" class="comment-item">
      <image :src="comment.avatar" class="avatar"></image>
      <view class="content">
        <text class="username">{{ comment.username }}</text>
        <text>{{ comment.content }}</text>
        <view class="meta">
          <text>{{ comment.time }}</text>
          <text @click="likeComment(index)">❤️ {{ comment.likes }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newComment: '',
      comments: [
        {
          avatar: '/static/avatar1.jpg',
          username: '用户A',
          content: '这个视频讲得很清楚！',
          time: '2小时前',
          likes: 12
        },
        // 更多评论...
      ]
    }
  },
  methods: {
    postComment() {
      if (!this.newComment.trim()) return
      
      this.comments.unshift({
        avatar: '/static/default-avatar.jpg',
        username: '当前用户',
        content: this.newComment,
        time: '刚刚',
        likes: 0
      })
      this.newComment = ''
      
      // 实际项目应调用云函数
      // uniCloud.callFunction({ name: 'addComment', data: {...} })
    },
    likeComment(index) {
      this.comments[index].likes++
      // 实际项目应调用云函数
      // uniCloud.callFunction({ name: 'likeComment', data: {...} })
    }
  }
}
</script>

<style>
.comment-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
</style>

2. 云函数示例（uniCloud）

// 添加评论云函数 addComment
module.exports = async (data) => {
  const db = uniCloud.database()
  const result = await db.collection('comments').add({
    video_id: data.videoId,
    user_id: data.userId,
    content: data.content,
    create_time: Date.now(),
    likes: 0
  })
  return result
}

三、关键技术点

1. 视频控制优化

   • 使用videoContext对象实现精细控制：

   const videoCtx = uni.createVideoContext('myVideo')
   videoCtx.seek(120) // 跳转到2分钟位置
   

2. 实时互动

   // 接收播放状态变化
   uni.$on('video-status-change', (status) => {
     console.log(status ? '视频开始播放' : '视频暂停')
   })
   

3. 数据缓存

   // 保存观看进度
   uni.setStorageSync('video_progress', currentTime)
   

4. 跨端适配方案

   平台	适配方案
   微信小程序	使用<live-player>直播组件
   H5	启用H5原生video控件
   App	集成原生播放器SDK

四、完整项目结构

project/
├── cloudfunctions/    # 云函数
│   ├── addComment     # 添加评论
│   └── getComments    # 获取评论
├── pages/
│   └── video/
│       ├── index.vue  # 视频播放页
│       └── comment.vue# 评论组件
└── static/            # 静态资源
    ├── videos/        # 视频资源
    └── avatars/       # 用户头像

注意事项：

1. 实际项目需配置安全域名（H5端）
2. 视频资源建议使用CDN加速
3. 敏感评论内容需接入内容安全API
4. 大视频文件推荐使用分片上传

此方案已实现基础功能，实际开发中可根据需求扩展：

• 弹幕功能（使用<canvas>绘制）
• 视频下载（App端使用downloadFile）
• 评论回复嵌套
• 播放历史记录功能