cc视频/场景视频-文件切片上传及H5播放器

cc视频文件切片上传

    <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);
            });

          });
      });
    },

cc视频H5播放器

    // 创建播放器
    createPlayer() {
      // this.test = document.getElementById('test')
      if (this.idx >= this.list.length) this.idx = 0
      this.player = window.createCCH5Player({
        vid: '13A3A442A872E53EB463AB73BD4C026B',
        siteid: '9EBCAB68B4ED483E',
        autoStart: true,
        width: '420',
        height: '210',
        parentNode: this.$refs.test
      })
      this.idx++
    },
    // nextPlayer() {
    //   this.player && this.player.destroy()
    //   this.createPlayer()
    // },
    setPlayerCallBack() {
      window.onCCH5PlayerLoaded = this.onCCH5PlayerLoaded
      window.on_CCH5player_ready = this.onPlayerReady
      window.on_player_volumechange = this.onPlayerVolumeChange
    },
    onCCH5PlayerLoaded() {
      window.ccH5PlayerJsLoaded = true
      this.createPlayer()
      // this.createPlayer2()
    },
    onPlayerReady(obj) {
      console.log('CCH5player_ready', obj)
      window.cc_js_Player.setVolume(0.3)
    },
    onPlayerVolumeChange(volume, vid) {
      console.log('设置音量回调:  ', volume, vid)
    },
    // addPlayer() {
    //   this.$router.push('/demo3')
    // }