视频播放记录完善

xiangpei

2025-05-27 8e003d317da31c555c5c746f62bd74c8dd46638b

 pages/tabbar/index/home.vue

@@ -9,17 +9,28 @@
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in videoList" :key="item.id">
      <!-- 播放按钮（仅当视频暂停时显示） -->
      <view 
        class="play-icon" 
        @click="togglePlay(index)"
        v-if="currentVideoIsPlaying != null && !currentVideoIsPlaying"
      >
        <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
      </view>
        <video 
          :id="'video'+index"
        :ref="'video'+index"
          :src="item.videoUrl"
          :autoplay="currentIndex === index"
          :controls="false"
          :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>
      
      <!-- 悬挂商品链接层 -->
@@ -85,31 +96,46 @@
</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 {
     isFullScreen: false,
     windowHeight: 0,
      currentIndex: 0, // 当前播放的视频索引
      videoList: [
      startHidenTime: 0, // 记录切换至其它页面的时间，用于计算视频观看时间减去的部分
      totalHidenTime: 0, // 总共隐藏页面的时间
      startPauseTime: 0, // 开始暂停的时间
      totalPauseTime: 0, // 总共暂停的时间
      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();
     // 如果视频按下暂停后切换页面再回到页面时，只算暂停时间（因为暂停时间和离开页面时间是重复的，只算一个）
     if(this.startHidenTime !== 0 && this.currentVideoIsPlaying) {
        const duration = Date.now() - this.startHidenTime
        this.totalHidenTime += duration
     }
  },
  onHide() {
     this.startHidenTime = Date.now()
  },
  onLoad() {
     if(!this.videoList || this.videoList.length < 1) {
        this.loadVideos();
     }
    
     this.loadVideos();
  },
  onReady() {
    // 初始化视频上下文
@@ -147,18 +173,29 @@
    
    // 滑动切换视频
    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();
      }
      // 如果视频处于暂停状态往下刷视频，那么需要再计算一次暂停时间
      if(!this.currentVideoIsPlaying) {
         if(this.startPauseTime !== 0) {
            const duration = Date.now() - this.startPauseTime
            this.totalPauseTime += duration
         }
      }
      // 保存上一个视频的播放记录
      this.savePlayRecord()
      const oldIndex = this.currentIndex;
      console.log("视频上下文",this.videoContexts[oldIndex]);
      this.currentIndex = e.detail.current;

      // 暂停上一个视频
      if (this.videoContexts[oldIndex]) {
         this.videoContexts[oldIndex].pause();
      }
      this.currentVideoIsPlaying = true;
      this.startPauseTime = 0;
      // 播放当前视频
      if (this.videoContexts[this.currentIndex]) {
         this.videoContexts[this.currentIndex].play();
      }
    },
    
    // 收藏/取消收藏
@@ -183,25 +220,63 @@
        }
     })
    },
    
    // 单击屏幕：暂停或继续播放
   togglePlay(index) {
      if(this.currentVideoIsPlaying) {
         this.videoContexts[index].pause();
      } else {
         this.videoContexts[index].play();
      }
   },
    // 视频播放事件
    onPlay(index) {
      console.log(`视频 ${index} 开始播放`);
    onPlay(id, index) {
      this.currentVideoIsPlaying = true;
      this.playRecord.videoId = id;
      // 没初始化才赋值，因为一个视频重复播放onPlay会重复触发
      if(this.playRecord.startPlayTime === 0) {
         this.playRecord.startPlayTime = Date.now();
      }
      if(this.startPauseTime !== 0) {
         const duration = Date.now() - this.startPauseTime
         this.totalPauseTime += duration
      }
    },
    
    // 视频暂停事件
    onPause(index) {
      console.log(`视频 ${index} 暂停`);
      this.currentVideoIsPlaying = false;
     this.startPauseTime = Date.now()
    },
    
    // 视频结束事件
    onEnded(index) {
      console.log(`视频 ${index} 播放结束`);
      // // 自动播放下一个（如果不在最后一个）
      // if (index < this.videoList.length - 1) {
      //   this.currentIndex = index + 1;
      // }
    }
      // this.currentVideoIsPlaying = false;
    },
	
   // 记录播放时长
   onTimeUpdate(e) {
      this.playRecord.playAt = e.detail.currentTime
   },
	
   // 保存播放记录
   async savePlayRecord() {
      console.log(Date.now(), this.playRecord.startPlayTime, this.totalHidenTime);
		
      const data = {
         videoId: this.playRecord.videoId,
         viewDuration: Date.now() - this.playRecord.startPlayTime - this.totalHidenTime - this.totalPauseTime,
         playAt: this.playRecord.playAt
      }
      this.playRecord = {
         videoId: null,
         viewDuration: 0, // 这个视频总共观看了多久
         playAt: 0 ,// 这个视频播放到哪了
         startPlayTime: 0 // 这个视频从什么时候开始播放的
      }
      this.totalHidenTime = 0
      this.totalPauseTime = 0
      savePlayRecord(data)
   }
  }
}
</script>
@@ -226,6 +301,16 @@
     height: 100%;
     object-fit: cover;
   }
   .play-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 45px;
     height: 45px;
     z-index: 10;
     opacity: 0.6;
   }
   
   .video-info {
     width: 70%;