自定义视频进度条

xiangpei

2025-06-09 cb07426138f701d38e11e9469d9ba4735098e7e0

 pages/tabbar/video/video.vue

@@ -20,7 +20,7 @@
      </view>
        <view class="video-actions">
          <u-button type="error" size="mini" @click="reUpload">重新上传</u-button>
          <u-button type="primary" size="mini" @click="chooseCover" v-if="videoInfo.url">选择封面</u-button>
          <u-button type="primary" size="mini" @click="chooseCover" v-if="videoInfo.url">{{formData.cover ? '更换封面' : '请选择封面'}}</u-button>
        </view>
      </view>
    </view>
@@ -57,7 +57,7 @@
                :key="index"
                :text="tag.tagName"
            :index="index"
            type="error"
            type="success"
                @close="removeTag(index)"
              />
            </view>
@@ -74,7 +74,7 @@
              :key="index"
              :text="tag.tagName"
               :index="index"
              type="primary"
              type="success"
             :closeable="false"
              @click="selectTopic(index)"
            />
@@ -178,8 +178,9 @@
import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
import USearch from '@/uview-components/uview-ui/components/u-search/u-search.vue';
import UPopup from '@/uview-components/uview-ui/components/u-popup/u-popup.vue';
import MyTag from "@/components/my-tag.vue"
import { getSTSToken } from "@/api/common.js";
import MyTag from '@/components/my-tag.vue'

import { getSTSToken, getFilePreviewUrl } from "@/api/common.js";
import { publish } from "@/api/video.js";
import { getRecommendTag3 } from "@/api/video-tag.js";
import { getFileKey } from "@/utils/file.js";
@@ -206,7 +207,9 @@
      formData: {
      id: '',
        title: '',
      cover: '',
      videoFileKey: '',
      videoDuration: 0,
      videoFit: 'cover',
        goodsId: '',
        tags: [],
@@ -238,7 +241,7 @@
  },
  computed: {
    canPublish() {
      return this.formData.videoFileKey && this.formData.title;
      return this.formData.videoFileKey && this.formData.title && this.formData.cover;
    },
    filteredGoods() {
      if (!this.goodsSearch) return this.goodsList;
@@ -260,7 +263,7 @@
  },
  methods: {
     // 获取推荐标签
     getRecommendTags(type) {
     async getRecommendTags(type) {
        const params = {
           tagName: this.tagInput.trim(),
           searchType: type
@@ -271,10 +274,8 @@
     },
     // 初始化腾讯云cos客户端
     initCOS() {
        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 +309,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,
@@ -388,7 +390,30 @@
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
        let fileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('/') + 1);
        // 处理安卓可能的URI编码
        if(fileName.indexOf('%') > -1) {
            fileName = decodeURIComponent(fileName);
        }
        const fileKey = getFileKey(fileName);
          this.videoInfo.cover = res.tempFilePaths[0];
        this.cosClient.uploadFile({
             Bucket: this.bucket,
             Region: this.region,
             Key: fileKey,
             FilePath: res.tempFilePaths[0], 
             SliceSize: 1024 * 1024 * 5     /* 触发分块上传的阈值,5M */
         }, (err, data) => {
             if (err) {
               console.log('上传失败', err);
             } else {
               // 获取封面的访问地址
               getFilePreviewUrl(fileKey).then(res => {
               this.videoInfo.cover = res.data.data
               this.formData.cover = fileKey
               })
             }
         });
        }
      });
    },
@@ -495,7 +520,9 @@
            id: '',
             title: '',
            videoFileKey: '',
            cover: '',
            videoFit: 'cover',
            videoDuration: 0,
             goodsId: '',
             tags: [],
             fileInfo: {}