video 播放先下载后播放

vue vidoe视频加载,先下载下来在播放，通过添加离开组件关闭还未请求完的数据

 <div class="public-container">
        <div style="display: flex; justify-content: space-evenly; flex-wrap: wrap;">
          <div v-for="(item, index) in videoList" :key="index"
            style="height: 120px;width: 180px; margin: 5px 0; position: relative; cursor: pointer;">
            <video :id="'videoPlayerpiLeft' + index" class="video-container" autoplay="autoplay" loop="loop" muted
              width="100%" height="100%" controls v-show="videoLoaded[index]"></video>
            <img v-if="!videoLoaded[index]" style="width: 100%;height: 100%;" :src="handleVideoUrl(item.snapImage)"
              alt="">
          </div>
        </div>
      </div>

获取令牌 用于离开组件的时候关闭接口请求

  this.cancelTokenSource = axios.CancelToken.source();
      handleVideo() {
      console.log('被调用几次呢handleVideo')

    this.cancelTokenSource = axios.CancelToken.source();

      var params = {}
      this.shipinVisible = true
      params.pageNo = 1
      params.pageSize = 10
      params.cameraCode = '0003'
      params.order = 'desc'
      params.column = 'startTime'
      getAction('media/record/list', params, 9000, this.cancelTokenSource.token).then(res => {
        if (res.code == 200) {
          this.shipinVisible = true
          this.videoList = res.result.records.slice(0, 4)
          this.videoListcopy = res.result.records
          this.$nextTick(() => {
            this.videoLoaded = new Array(this.videoList.length).fill(false);
            this.downloadVideosSequentially()
          })
        }
      })
    },
        async downloadVideosSequentially() {
      console.log('被调用几次呢downloadVideosSequentially')

      let index = 0;
      let totalVideos = this.videoListcopy.length;

      while (index < totalVideos) {
        const item = this.videoListcopy[index];
        let success = false;

        while (!success && index < totalVideos) {
          try {
            await this.downloadFile(this.handleVideoUrl(item.url), index);
            success = true;
          } catch (error) {
            console.error(`Error downloading video at index ${index}:`, error);
            index++;
          }
        }

        // 如果成功下载，增加 index
        if (success) {
          index++;
        }
      }
    },
downloadFile(item, index) {
    // 如果已有请求在进行中，则取消之前的请求
    if (this.cancelTokenSource) {
      this.cancelTokenSource.cancel('请求被取消');
    }
    // 创建一个新的 CancelToken
    this.cancelTokenSource = axios.CancelToken.source();

    return new Promise((resolve, reject) => {
      this.loading = true;
      let videoElement;

      this.$nextTick(() => {
        videoElement = document.getElementById('videoPlayerpiLeft' + index);

        axios({
          method: 'GET',
          url: item,
          responseType: 'blob',
          cancelToken: this.cancelTokenSource.token 
        })
          .then(res => {
            console.log(res);
            if (res.status === 200) {
              const blob = new Blob([res.data]);
              const href = window.URL.createObjectURL(blob);
              console.log('hrefhref', href);
              this.play(videoElement, href);
              this.$set(this.videoLoaded, index, true);
              resolve(); // 请求成功后解析 Promise
            }
          })
          .catch(error => {
            if (axios.isCancel(error)) {
              console.log('请求被取消:', error.message);
            } else {
              console.error('Error downloading video:', error);
              reject(error);
            }
          })
          .finally(() => {
            this.loading = false;
          });
      });
    });
  },

xiaos 设置

export function getAction(url, parameter, timeout = 9000, cancelToken) {
    let sign = signMd5Utils.getSign(url, parameter);
    //将签名和时间戳，添加在请求接口 Header
    // update-begin--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
    let signHeader = { "X-Sign": sign, "X-TIMESTAMP": signMd5Utils.getTimestamp() };
    // update-end--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
    if (!timeout) {
        timeout = 9000
    }
    const config = {
        url: url,
        method: 'get',
        params: parameter,
        timeout: timeout,
        headers: signHeader
    };
    console.log('getActiongetAction', cancelToken)
    if (cancelToken) {
        config.cancelToken = cancelToken;
    }
    return axios(config);
}