视频播放记录保存

xiangpei

2025-05-27 7db888ef570230c5bc8b9e382514eeb5143a18dc

视频播放记录保存

 api/video.js

@@ -33,3 +33,17 @@
    needToken: true
  });
}

/**
 * 保存视频播放记录
 * 
 * @param params
 */
 export function savePlayRecord(data) {
  return http.request({
    url: "/lmk/video/view/record",
    method: Method.POST,
    needToken: true,
    data: data
  });
}

 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,12 +96,18 @@
</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, // 当前视频是否正在播放
        playRecord: {
            videoId: null,
            viewDuration: 0, // 这个视频总共观看了多久
            playAt: 0 ,// 这个视频播放到哪了
            startPlayTime: 0 // 这个视频从什么时候开始播放的
        },
        currentVideoIsPlaying: null, // 当前视频是否正在播放
      isFullScreen: false,
      windowHeight: 0,
      currentIndex: 0, // 当前播放的视频索引
@@ -114,7 +121,7 @@
    }
  },
  onShow() {
    this.loadVideos();
    // this.loadVideos();
  },
  onLoad() {
      this.loadVideos();
@@ -155,7 +162,10 @@
    
    // 滑动切换视频
    onSwiperChange(e) {
        // 保存上一个视频的播放记录
        this.savePlayRecord()
      const oldIndex = this.currentIndex;
        console.log("视频上下文",this.videoContexts[oldIndex]);
      this.currentIndex = e.detail.current;
      
      // 暂停上一个视频
@@ -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,7 +226,28 @@
    
    // 视频结束事件
    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)
    }
  }
}