The cause of

According to the requirements, we need to realize a video uploading function. Before, we used Qiuniuyun to upload. Small videos are ok, but large videos, such as 600M, will take about half an hour considering the network speed and other reasons.

Later, it was analyzed that not only the upload time should be considered, but also the user’s use of 4G network and the user’s traffic should be considered. Online videos should be put on the page without compression and transcoding. Videos are not pictures and should not be dumped on CDN. Consider video size, PC mobile adaptation, transcoding, and anti-piracy issues.

Finally, I decided to use Tencent cloud to upload videos. My project is web uploading. Please refer to the following link

Website links: cloud.tencent.com/document/pr…

Use in projects

The project uses vue.js + element-ui el-upload components

  • The introduction of the SDK:

    npm install vod-js-sdk-v6

    import TcVod from 'vod-js-sdk-v6'

  • The HTML code

    // upload <el-upload ref="upload"
    action="filename" 
    :http-request="httpRequest"
    :show-file-list="false">
    <i v-if="videoFlag == false" class="el-icon-plus avatar-uploader-icon"></ I ></ el-upload> // Progress bar <el-progress V-if ="videoFlag"
      type="circle"
      :percentage="videoUploadPercent"
    ></el-progress>
Copy the code
    • Action: upload address, mandatory, but we use http-request, fill in any string, no practical meaning.
    • Http-request: overrides the default upload behavior. Here we need to customize the upload behavior
    • Percentage: indicates the progress bar

  • Js code

    Methods :{// video - custom address httpRequest(file){const _this = this // restrict video formatif (["video/mp4"."video/quicktime"].indexOf(file.file.type) == -1) {
        this.$message.error("Video format error, upload failed.");
        return false; } // limit video to less than 700M const isLt10M = file.file.size / 1024/1024 < 700;if(! isLt10M) { this.$message.error("Please upload videos in MP4 or MOV format up to 700MB.");
        return false; } // Show progress bar starting from 0 _this.videoFlag =trueThis.videouploadpercent =0 const getSignature = asyncfunction() {returnAwait getuploadsignature({// we are sending axios request video_type:'operating_activity'}). Then (res => {returnRes})} / / access to upload the signature functions described herein before const tcVod = new tcVod ({getSignature: getSignature}) const uploader = tcVod. Upload ({ mediaFile: }) uploaderG = uploader // uploaderG = uploaderG //'media_progress'.function(info) { _this.videoUploadPercent = parseInt(info.percent * 100); }) // Uploader.done ().then(()doneResult) => {
        _this.videoFlag = false// Close the progress bar _this.videoForm.video =doneResult.fileId // Store fileId // send a request to the back end for transcoding const data = {file_id:doneResult.fileId, // Tencent cloud file_id video_type:'operating_activity'// Video type video_name:' ', // Video name video_url:doneResult.video && doneResult.video.url?doneResult.video.url:' 'Then (res => {}). Catch (err => {console.log(err)})}). Catch ((err) => {console.log(err)})}). console.log(err) }) } }Copy the code

    Transcoding takes a certain amount of time, and the larger the video volume, the longer the transcoding time.

    When the form is submitted, the fileId value will be sent to the back end. When the video preview is needed, the back end will request the video details interface after obtaining the fileId, and finally play the returned video address.