cc视频文件切片上传及H5播放器

上传

    <el-upload
      class="upload-demo"
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :http-request="handleaddvideo"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
	
	handleaddvideo(file) {
      console.log(file);
      // 创建视频上传信息
      let data = {
        userid: this.userid,
        title: "test",
        filename: file.file.name,
        filesize: file.file.size,
      };
      this.$axios.get(`/api/video/create/v2?${Encrypt(data)}`).then((res) => {
        console.log(res);
        this.uploadinfo.metaurl = res.data.uploadinfo.metaurl;
        this.uploadinfo.chunkurl = res.data.uploadinfo.chunkurl;
        this.uploadinfo.servicetype = res.data.uploadinfo.servicetype;
        this.uploadinfo.videoid = res.data.uploadinfo.videoid;

        // 查询文件上传状态及断点位置
        let params = {
          uid: this.userid,
          ccvid: this.uploadinfo.videoid,
          filename: file.file.name,
          filesize: file.file.size,
          servicetype: this.uploadinfo.servicetype,
        };

        this.$axios
          .get(`${this.uploadinfo.metaurl}`, { params: params })
          .then((resss) => {
            console.log(resss);

            const chunkSize = 1024 * 512 ; // 1MB一片

            // let chunkCount =  Math.ceil(params.filesize / chunkSize) // 总片数

            // for(let i = 1 ; i <= chunkCount ; i++){

            // }

            //  上传视频文件块CHUNK
            this.$axios.defaults.headers.post['Content-Type'] = 'multipart/form-data; boundary=boundaryText'
            this.$axios({
              url:
                `${this.uploadinfo.chunkurl}` + "?ccvid=" + this.uploadinfo.videoid,
              headers: {
                "Content-Type": "multipart/form-data; boundary="+file.file.slice(0, chunkSize),
                "Content-Range": "bytes "+ '0' +'-' + chunkSize + "/" + file.file.size,
                "Content-Length": 521288
              },
              method: "post",
              data:{ccvid:this.uploadinfo.videoid}
            }).then((ressss) => {
              console.log(ressss);
            });

          });
      });
    },