el-upload结合video上传视频

页面效果：上传的视频支持全屏，播放，暂停，下载，画中画，控制播放速度

 代码：

            <div>
              <el-upload
                name="cnFile"
                class="upload-demo"
                action=""
                accept="video/*"
                :file-list="dataCnName"
                :http-request="uploadFileAction"
                :show-file-list="false"
                :before-upload="beforeUpload"
              >
                <el-button size="small" type="primary" class="upload-demo-btn"                     
                 @click="CnOrEnFlag('tv1')"
                >上传中文视频</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  <span>仅支持最大不超过1G的视频</span>
                  <span style="color:red;padding-left:20px">&nbsp;&nbsp;注：上传视频请以英文 
                  命名</span>
                  </div>
               
              </el-upload>
            </div>
            <video v-if="modelData.videoCnUrl" :src="modelData.videoCnUrl" class="videoCn" 
               controls="controls">
              您的浏览器不支持视频播放
            </video>

data中：

dataCnName: [],
modelData:[],
CnOrEnVideoFlag: '',
tvForm: {
        msgTattle: '',
        videoCnUrl: '',//视频地址
        msgCnInfo: '',
        videoEnUrl: '',
        msgTattleEn: '',
        videoCnImg:'',
      },

methods中的事件：

//视频上传
    CnOrEnFlag(val) {
      this.CnOrEnVideoFlag = val
    },  
   beforeUpload(file) {
      console.log('上传前')
      console.log(file)
      console.log(file.size / 1024 / 1024)
      // let isLt50M = file.size / 1024 / 1024 < 1000
      // if (!isLt50M) {
      //   this.$message.info('上传文件大小不能超过1G!')
      //   return false
      // }

      //控制上传按钮加载
      // if(this.CnOrEnVideoFlag=="tv1"){
      //   this.loading1=true;
      // }else{
      //     this.loading2=true;
      // }
      return true
    },
    uploadFileAction(param) {
      this.uploadNum=0;
      const file = param.file;
      const formData = new FormData();
      formData.append('file', file);
      let obj={
        name:'文件上传中',
        dataFileUrl: '',
      }
      param.filename == "cnFile" ? this.dataCnName.push(obj) : this.dataEnName.push(obj);
      this.upFile(file, (res) => {
        if(res){
          let data = res.res.requestUrls[0].split('?');
          param.filename == "cnFile" ? this.tvForm.videoCnUrl = data[0] : this.tvForm.videoEnUrl = data[0];
        }
        console.log(res);
        let nameArr = res.name.split('/');
        obj.name=nameArr[1];
        obj.dataFileUrl= res.name;
        this.$message.success('文件上传成功');
      });
    },
    upFile(file, callback) {
      let url = '/sys/写接口接口接口地址';
      postAction(url,{}).then((res) => {
        if (!res) {
          Vue.prototype.$message.warning("oss配置信息没有获取到，不能上传");
          return null;
        }
        let typeFile= 'text/plain'
        if(file.type==='application/pdf'){
            typeFile=file.type;
        }
        const client = new OSS(res.result);
        let tempCheckpoint;
        client.multipartUpload(`${new Date().getTime()}/${file.name}`, file, {
            progress: (p, checkpoint) => {
                // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
                tempCheckpoint = checkpoint;
            },
            meta: {year: 2020, people: 'test'},
            mime:typeFile,
        }).then(result => {
          this.uploadNum=0;
            callback && callback(result);
        }).catch((err) => {
           this.uploadNum++;
           if(this.uploadNum<6){
            this.upFile(file, callback);
           }else{
             this.$message.warning("上传失败")
           }
        })
      })
      // const OSSInfo =  httpClient.promise('post','/sys/msg/upload', {});
      // if (!OSSInfo) {
      //     Vue.prototype.$message.warning("oss配置信息没有获取到，不能上传");
      //     return null;
      // }
      
    },

css样式：

.upload-demo-btn {
  margin-left: 10px;
}
.videoCn,.videoEn{
  width:250px;
  height:200px;
  margin-left: 11%;
}