真机上视频加载和渲染是异步的，可能导致 onPlay/onPause 事件触发延迟。解决暂停图标和播放不一致问题

xiangpei

2025-05-29 1c0627671cd95695df604a54de0bbb76469c21e9

 pages/tabbar/index/home.vue

@@ -13,7 +13,7 @@
      <view 
        class="play-icon" 
        @click="togglePlay(index)"
        v-if="currentVideoIsPlaying != null && !currentVideoIsPlaying"
        v-if="!currentVideoIsPlaying"
      >
        <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
      </view>
@@ -97,7 +97,7 @@
   <uni-popup ref="commentPopup" type="bottom" :is-mask-click="true" @maskClick="closeCommentPopup">
     <view class="comment-popup">
       <view class="popup-header">
         <text class="popup-title">评论({{comments.length}})</text>
         <text class="popup-title">评论({{commentsTotal}})</text>
         <text class="iconfont close-icon" @click="closeCommentPopup">&#xe675;</text>
       </view>
       
@@ -143,6 +143,7 @@
export default {
  data() {
    return {
      commentNoMore: false, // 是否还有更多评论
      commentQuery: {
         pageNumber: 1,
         pageSize: 5,
@@ -156,6 +157,7 @@
         replyId: null
      },
      comments: [],            // 评论列表
      commentsTotal: 0,            // 评论总条数
      commentLoading: false,   // 评论加载状态
      startHidenTime: 0, // 记录切换至其它页面的时间，用于计算视频观看时间减去的部分
      totalHidenTime: 0, // 总共隐藏页面的时间
@@ -167,7 +169,7 @@
         playAt: 0 ,// 这个视频播放到哪了
         startPlayTime: 0 // 这个视频从什么时候开始播放的
      },
      currentVideoIsPlaying: null, // 当前视频是否正在播放
      currentVideoIsPlaying: true, // 当前视频是否正在播放
      isFullScreen: false,
      windowHeight: 0,
      currentIndex: 0, // 当前播放的视频索引
@@ -181,6 +183,7 @@
    }
  },
  onShow() {
     this.loadVideos()
     // 如果视频按下暂停后切换页面再回到页面时，只算暂停时间（因为暂停时间和离开页面时间是重复的，只算一个）
     if(this.startHidenTime !== 0 && this.currentVideoIsPlaying) {
        const duration = Date.now() - this.startHidenTime
@@ -229,10 +232,12 @@
                         replyId: null
              }
              this.comments.unshift(res.data.data);
              console.log("新增后",this.comments);
              uni.showToast({
                title: '评论成功'
              });
              // 当前视频评论数加一
              this.commentsTotal += 1;
              this.videoList[this.currentIndex].commentNum += 1;
           } else {
              uni.showToast({
@@ -249,7 +254,6 @@
       },
       // 关闭评论弹窗
       closeCommentPopup() {
         console.log("触发了");
        this.$refs.commentPopup.close()
         this.showCommentPopup = false;
         this.comments = [];
@@ -259,11 +263,30 @@
           commentContent: '',
           replyId: null
        }
        this.commentQuery.pageNumber = 1;
        this.commentNoMore = false;
       },
      // 下滑评论区加载评论
      async getCommentPage() {
         this.commentQuery.pageNumber += 1;
         if(this.commentNoMore) {
            return;
         }
         getVideoComments(this.commentQuery).then(res => {
            this.comments.push(res.data.data)
            if(this.commentQuery.pageNumber === 1) {
               this.comments = res.data.data
            } else {
               this.comments = [
                 ...this.comments,
                 ...res.data.data.filter(
                   (newItem) => !this.comments.some((oldItem) => oldItem.id === newItem.id)
                 ),
               ];
            }
            if (res.data.data.length < this.commentQuery.pageSize) {
               this.commentNoMore = true;
               return;
            }
            this.commentQuery.pageNumber++;
         })
      },
       // 显示评论弹窗
@@ -273,8 +296,12 @@
         this.commentLoading = true;
         this.commentQuery.videoId = item.id
        // 首次加载评论分页大小增加一倍，以产生滚动条，后续可触发
        this.commentQuery.pageSize *= 2;
        getVideoComments(this.commentQuery).then(res => {
           this.comments = res.data.data
           this.commentsTotal = res.data.total;
           this.comments = res.data.data;
           this.commentQuery.pageNumber += 2;
           this.commentQuery.pageSize /= 2;
        }).catch(() => {
           uni.showToast({
             title: '获取评论失败',
@@ -347,14 +374,13 @@
      // 保存上一个视频的播放记录
      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]) {
@@ -394,7 +420,13 @@
   },
    // 视频播放事件
    onPlay(id, index) {
      this.currentVideoIsPlaying = true;
      console.log(id, index, "触发播放");
      if(index === this.currentIndex) {
         this.currentVideoIsPlaying = true;
      } else {
         this.currentVideoIsPlaying = false;
         return
      }
      this.playRecord.videoId = id;
      // 没初始化才赋值，因为一个视频重复播放onPlay会重复触发
      if(this.playRecord.startPlayTime === 0) {
@@ -408,7 +440,13 @@
    
    // 视频暂停事件
    onPause(index) {
      this.currentVideoIsPlaying = false;
      console.log(index, "触发暂停");
      if(index === this.currentIndex) {
         this.currentVideoIsPlaying = false;
      } else {
         this.currentVideoIsPlaying = true;
         return
      }
     this.startPauseTime = Date.now()
    },