Vue + Tencent Cloud upload all kinds of resources (pictures, videos, audio, documents, resource packages) & TCplayer video playback

(I) Upload pictures, audio, documents and resource packages

Basic steps

(1) Introduction

import COS from "cos-js-sdk-v5";
Copy the code

(2) index.js in util folder

export const getdate = () => { var myDate = new Date; var year = myDate.getFullYear(); Var mon = mydate.getMonth () + 1; Var date = mydate.getDate (); Var sp='/'; return year+sp+mon+sp+date+sp; }Copy the code

export const randomString = (len, charSet) => {
    charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var randomString = '';
    for (var i = 0; i < len; i++) {
        var randomPoz = Math.floor(Math.random() * charSet.length);
        randomString += charSet.substring(randomPoz,randomPoz+1);
    }
    return randomString;
}
Copy the code

(3) Obtain cos configuration from the interface

// Import the method import {randomString, getdate,setCookieCos,getCookieCos } from '@/util' if(getCookieCos('teacheronlinecos')){ this.cos = JSON.parse(getCookieCos('teacheronlinecos')); }else{ let res = await getCos(); if(res){ this.cos = res; setCookieCos(res,10); } } var that = this; this.cos_key = "teacheronline/" + getdate() + randomString( 32, "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") +that.file_type; var cos = new COS({ SecretId: that.cos.temp_keys.credentials.tmpSecretId, SecretKey: that.cos.temp_keys.credentials.tmpSecretKey, XCosSecurityToken: that.cos.temp_keys.credentials.sessionToken, StartTime: that.cos.temp_keys.startTime, ExpiredTime: that.cos.temp_keys.expiredTime, }); Cos.putobject ({Bucket: that.cos. Bucket /* required */, Region: that.cos. Region /* Required field */, Key: This. cos_key /* must */, StorageClass: "STANDARD", Body: this.file, // Upload file object onProgress: (progressData) => { that.video_progress = parseInt(progressData.percent * 100) }, }, (err, data) => { if(err==null&&data.statusCode==200){ that.uploadForm.img_url = "https://" + data.Location; that.is_show = false; that.is_multiple = false } if (err) { return console.log(err); }});Copy the code

(2) Video

Basic steps

(1) Introduction

import TcVod from "vod-js-sdk-v6";
Copy the code

(2) Obtain the video signature based on the interface

getSignature() {
            return getVod().then((res) => {
                return res.signature;
            });
        },
Copy the code

(3) Upload videos

uptoVod(){ var that = this; that.video_loading = true; Const tcVod = new tcVod ({getSignature: that.getsignature, // uploadsignature function}); Var uploader = tcvod. upload({mediaFile: thate. mediaFile, // mediaName: thate. type, // uploader = tcvod. upload({mediaFile: thate. mediaFile, // mediaName: thate. type, // uploader.on("media_progress", function (info) { that.video_progress = parseInt(info.percent * 100) }); uploader.done().then(function (doneResult) { that.uploadForm.video_url = doneResult.video.url; that.video_id = doneResult.fileId; that.is_upload = true; that.video_loading = false; that.tcpPlayer(doneResult.fileId,doneResult.video.url); }).catch(function (err) { console.log(err); }); },Copy the code

(4) After the video is uploaded, it needs time to decode, and then add the video label through control hiding

<video controls="controls" :src="play_url" width="500" height="300" preload="auto" playsinline Webkit-playsinline > Your browser does not support the video TAB 2. </video>Copy the code

(5) Upload is displayed in DOM

<el-checkbox-group v-model="uploadForm.video_url" v-show="false"></el-checkbox-group> <el-upload :class="is_multiple? '' : 'upload_btn_show'" v-show="! is_upload" :show-file-list="false" :disabled='is_upload' class="upload-demo" action="no" :on-success="handleVideoSuccess" :on-remove="handleVideoRemove" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess" :http-request="uptoVod" accept=".mp4,.avi,.MP4,.MOV,.x-msvideo,.rmvb,.rm,.3gp"> <div Class =" upload__text"></div> <p> Click upload </p> </div> <div class="el-upload__tip" Mp4, AVI, mov, RMVB, rm, FLV, 3GP </div> </el-upload>Copy the code

(3) Video playback

Basic steps

(1) Import (in index.html)

<link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet"> <! -- If you want to play HLS videos in modern browsers like Chrome and Firefox in H5, you need to introduce HLS.min.0.13.2m.js before tcplayer.v4.1.min.js. -- > < script SRC = "https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js" > < / script > <! - the player script file -- > < script SRC = "https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js" > < / script >Copy the code

(2) Get the Video_URL from the interface

tcpPlayer(file_id,file_url) {
     var that = this;
     getPlayer({ file_id: file_id, file_url:file_url}).then((res) => {
         that.play_url = res.url;
     }).catch((err) => {
          console.warn(err);
     });
 },
Copy the code