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

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%;

 pages/tabbar/video/video.vue

@@ -207,6 +207,7 @@
        id: '',
        title: '',
        videoFileKey: '',
        videoDuration: 0,
        videoFit: 'cover',
        goodsId: '',
        tags: [],
@@ -260,7 +261,7 @@
  },
  methods: {
      // 获取推荐标签
      getRecommendTags(type) {
      async getRecommendTags(type) {
          const params = {
              tagName: this.tagInput.trim(),
              searchType: type
@@ -274,7 +275,6 @@
          console.log("执行了");
          // 调用后端获取sts临时访问凭证
          getSTSToken().then(res => {
              console.log(res, "sts结构");
              const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
              // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 上线时使用压缩包
              
@@ -308,20 +308,21 @@
            if(fileName.indexOf('%') > -1) {
                fileName = decodeURIComponent(fileName);
            }
          const fileKey = getFileKey(fileName);
          this.videoInfo = {
            url: res.tempFilePath,
            fileKey: fileKey,
            fileType: fileKey.split('/')[0],
            fileSize: res.size,
            originalFileName: fileName,
            cover: ''
          };
          this.formData.videoFileKey = fileKey;
          // 判断视频的填充模式
          this.formData.videoFit = this.calculateVideoFit(res.width, res.height)
            const fileKey = getFileKey(fileName);
           this.videoInfo = {
             url: res.tempFilePath,
             fileKey: fileKey,
             fileType: fileKey.split('/')[0],
             fileSize: res.size,
             originalFileName: fileName,
             cover: ''
           };
           this.formData.videoFileKey = fileKey;
           this.formData.videoDuration = res.duration;
           // 判断视频的填充模式
           this.formData.videoFit = this.calculateVideoFit(res.width, res.height)
          
          this.cosClient.uploadFile({
           this.cosClient.uploadFile({
                Bucket: this.bucket,
                Region: this.region,
                Key: fileKey,
@@ -496,6 +497,7 @@
                title: '',
                videoFileKey: '',
                videoFit: 'cover',
                videoDuration: 0,
                goodsId: '',
                tags: [],
                fileInfo: {}

 static/video/play.png