发布视频时获取视频时长、视频暂停功能

xiangpei

2025-05-26 1076d3e64cfb8648e429b3d7a3399e4593affc0c

 pages/tabbar/index/home.vue

@@ -9,8 +9,17 @@
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in videoList" :key="item.id">
      <!-- 播放按钮（仅当视频暂停时显示） -->
      <view 
        class="play-icon" 
        @click="togglePlay(index)"
        v-if="!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"
@@ -20,6 +29,7 @@
          @play="onPlay(index)"
          @pause="onPause(index)"
          @ended="onEnded(index)"
        @click="togglePlay(index)"
        ></video>
      
      <!-- 悬挂商品链接层 -->
@@ -90,6 +100,7 @@
export default {
  data() {
    return {
     currentVideoIsPlaying: false, // 当前视频是否正在播放
     isFullScreen: false,
     windowHeight: 0,
      currentIndex: 0, // 当前播放的视频索引
@@ -106,10 +117,7 @@
    this.loadVideos();
  },
  onLoad() {
     if(!this.videoList || this.videoList.length < 1) {
        this.loadVideos();
     }
    
     this.loadVideos();
  },
  onReady() {
    // 初始化视频上下文
@@ -183,24 +191,27 @@
        }
     })
    },
    
    // 单击屏幕：暂停或继续播放
   togglePlay(index) {
      if(this.currentVideoIsPlaying) {
         this.videoContexts[index].pause();
      } else {
         this.videoContexts[index].play();
      }
   },
    // 视频播放事件
    onPlay(index) {
      console.log(`视频 ${index} 开始播放`);
      this.currentVideoIsPlaying = true;
    },
    
    // 视频暂停事件
    onPause(index) {
      console.log(`视频 ${index} 暂停`);
      this.currentVideoIsPlaying = false;
    },
    
    // 视频结束事件
    onEnded(index) {
      console.log(`视频 ${index} 播放结束`);
      // // 自动播放下一个（如果不在最后一个）
      // if (index < this.videoList.length - 1) {
      //   this.currentIndex = index + 1;
      // }
      this.currentVideoIsPlaying = false;
    }
  }
}
@@ -226,6 +237,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%;