视频播放记录保存

xiangpei

2025-05-27 7db888ef570230c5bc8b9e382514eeb5143a18dc

 pages/tabbar/index/home.vue

@@ -13,7 +13,7 @@
      <view 
        class="play-icon" 
        @click="togglePlay(index)"
        v-if="!currentVideoIsPlaying"
        v-if="currentVideoIsPlaying != null && !currentVideoIsPlaying"
      >
        <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
      </view>
@@ -26,10 +26,11 @@
          :loop="true"
        :object-fit="item.objectFit"
          class="video-item"
          @play="onPlay(index)"
          @play="onPlay(item.id, index)"
          @pause="onPause(index)"
          @ended="onEnded(index)"
        @click="togglePlay(index)"
        @timeupdate="onTimeUpdate($event)"
        ></video>
      
      <!-- 悬挂商品链接层 -->
@@ -95,26 +96,32 @@
</template>

<script>
import { getRecommendVideos } from "@/api/video.js";
import { getRecommendVideos, savePlayRecord } from "@/api/video.js";
import { changeCollect } from "@/api/collect.js";
export default {
  data() {
    return {
     currentVideoIsPlaying: false, // 当前视频是否正在播放
     isFullScreen: false,
     windowHeight: 0,
      currentIndex: 0, // 当前播放的视频索引
      videoList: [
      playRecord: {
         videoId: null,
         viewDuration: 0, // 这个视频总共观看了多久
         playAt: 0 ,// 这个视频播放到哪了
         startPlayTime: 0 // 这个视频从什么时候开始播放的
      },
      currentVideoIsPlaying: null, // 当前视频是否正在播放
      isFullScreen: false,
      windowHeight: 0,
      currentIndex: 0, // 当前播放的视频索引
      videoList: [
        
     ],   // 视频列表数据
      videoContexts: [], // 视频上下文对象集合
      loading: false,  // 是否正在加载
      page: 1,         // 当前页码
      pageSize: 10     // 每页数量
      ],   // 视频列表数据
      videoContexts: [], // 视频上下文对象集合
      loading: false,  // 是否正在加载
      page: 1,         // 当前页码
      pageSize: 10     // 每页数量
    }
  },
  onShow() {
    this.loadVideos();
    // this.loadVideos();
  },
  onLoad() {
     this.loadVideos();
@@ -155,18 +162,21 @@
    
    // 滑动切换视频
    onSwiperChange(e) {
      const oldIndex = this.currentIndex;
      this.currentIndex = e.detail.current;
      
      // 暂停上一个视频
      if (this.videoContexts[oldIndex]) {
        this.videoContexts[oldIndex].pause();
      }
      
      // 播放当前视频
      if (this.videoContexts[this.currentIndex]) {
        this.videoContexts[this.currentIndex].play();
      }
      // 保存上一个视频的播放记录
      this.savePlayRecord()
      const oldIndex = this.currentIndex;
      console.log("视频上下文",this.videoContexts[oldIndex]);
      this.currentIndex = e.detail.current;

      // 暂停上一个视频
      if (this.videoContexts[oldIndex]) {
         this.videoContexts[oldIndex].pause();
      }

      // 播放当前视频
      if (this.videoContexts[this.currentIndex]) {
         this.videoContexts[this.currentIndex].play();
      }
    },
    
    // 收藏/取消收藏
@@ -200,8 +210,13 @@
      }
   },
    // 视频播放事件
    onPlay(index) {
    onPlay(id, index) {
      this.currentVideoIsPlaying = true;
      this.playRecord.videoId = id;
      // 没初始化才赋值，因为一个视频重复播放onPlay会重复触发
      if(this.playRecord.startPlayTime === 0) {
         this.playRecord.startPlayTime = Date.now();
      }
    },
    
    // 视频暂停事件
@@ -211,8 +226,29 @@
    
    // 视频结束事件
    onEnded(index) {
      this.currentVideoIsPlaying = false;
    }
      // this.currentVideoIsPlaying = false;
    },
	
   // 记录播放时长
   onTimeUpdate(e) {
      this.playRecord.playAt = e.detail.currentTime
   },
	
   // 保存播放记录
   async savePlayRecord() {
      const data = {
         videoId: this.playRecord.videoId,
         viewDuration: Date.now() - this.playRecord.startPlayTime,
         playAt: this.playRecord.playAt
      }
      this.playRecord = {
         videoId: null,
         viewDuration: 0, // 这个视频总共观看了多久
         playAt: 0 ,// 这个视频播放到哪了
         startPlayTime: 0 // 这个视频从什么时候开始播放的
      }
      savePlayRecord(data)
   }
  }
}
</script>