vue el-upload上传腾讯云视频和点播播放器

引入SDK npm install vod-js-sdk-v6 --save

TencentUpload.vue文件

<template>
    <div>
        <div>
        <el-upload
            ref="upload"
            action=""
            :show-file-list="false"
            :http-request="uploadTencentVideo"
            :on-change="handleTencentChange"
            accept=".mp4,.webm,.wmv,.wm,.asf,.asx,.rm,.rmvb,.ra,.ram,.mpg,.mpeg,.mpe,.vob,.dat,.mov,.3gp,.mp4v,.m4v,.mkv,.avi,.flv,.f4v"
        >
            上传视频
        </el-upload>
        <div v-if="showProgress">
            <p>{{ videoName }}</p>
            <el-progress :percentage="progress"></el-progress>
        </div>
        </div>
            <!-- 腾讯云视频点播 -->
            <tencent-player :options="curCatelogItem"></tencent-player>
    </div>
</template>

<script>
import TcVod from "vod-js-sdk-v6";
import TencentPlayer from "@/view/tencentPlayer";
export default {
    components: { TencentPlayer },
    data() {
        return {
            fileTencentList: [],
            showProgress: false,
            videoName: "",
            progress: "",
            curCatelogItem: {},
        }
    },
    methods:{
        // 自定义上传腾讯云视频
        uploadTencentVideo(params) {
            if (this.fileTencentList.length == 0) {
                this.showMsg("warning", "请上传视频");
            } else {
                //腾讯云SDK规定getSignature签名必须是一个函数
                const getSignature = async () => {
                    const data = await this.getVodSignature();
                    return data;
                };
                // 获取上传签名的函数
                const tcVod = new TcVod({
                    getSignature: getSignature,
                });
                // 上传腾讯云的接口请求头不能有自定义添加的参数
                const mediaFile = this.fileTencentList[0].raw;
                let isVideoUploadSuccess = false;
                const uploader = tcVod.upload({
                    mediaFile: mediaFile,
                });
                // 视频上传进度
                uploader.on("media_progress", (info) => {
                    this.progress = parseInt(info.percent * 100);
                });
                // 视频上传完成时
                uploader.on("media_upload", (info) => {
                    isVideoUploadSuccess = true;
                });
                // 上传结束时，将url存到本地
                uploader.done().then((res) => {
                    if (isVideoUploadSuccess === true) {
                        this.curCatelogItem.fileId = res.fileId;

                    } else {
                        this.showMsg(
                            "warning",
                            "上传腾讯云出错，请联系管理员！"
                        );
                    }
                });
            }
        },
        //选取文件时调用事件
        handleTencentChange(file, fileList) {
            this.fileTencentList = fileList;
            if (this.fileTencentList.length > 1) {
                this.fileTencentList.splice(0, 1);
                this.videoName = "";
                this.progress = 0;
            }
            this.showProgress = true;
            this.videoName = this.fileTencentList[0].raw.name;
        },
        // 获取上传腾讯云签名
        getVodSignature() {
            let that = this;
            const url = "/api/File/GetVodSign";
            return axios.post(url).then((res) => {
                if (res.Code == 200) {
                    return res.Data.signStr;
                }
            });
        },
    },
}
</script>

• 腾讯云SDK规定getSignature签名必须是一个函数
• 全局的axios请求头不能有自定义添加的参数，否则会报跨域错

TencentPlayer.vue文件

<template>
    <div>
        <video :id="tcPlayerId" class="tencent-player" preload="auto" playsinline webkit-playsinline></video>
    </div>
</template>

<script>
function loadTcScript(cb) {
    loadScript(cb, {
        id: 'tcPlayerScriptId',
        url: '//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
    });
}
function loadScript(cb, obj) {
    if (document.getElementById(obj.id)) {
        cb();
    } else {
        const script = document.createElement('script');
        script.async = true;
        script.src = obj.url;
        script.id = obj.id;
        script.onload = () => {
            cb();
        };
        document.body.appendChild(script);
    }
}
export default {
    name: 'TencentPlayer',
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            tcPlayerId : 'tcPlayer' + Date.now(),
            player: null,
        };
    },
    watch: {
        options: {
            handler(newV, oldV) {
                this.$nextTick(() => {
                    this.loadJS();
                });
            },
            immediate: true,
            deep: true,
        }
    },
    beforeDestroy () {
        this.player.dispose()//再次进来播放器无法加载的问题:销毁掉播放器
    },
    methods: {
        loadJS() {
            if (window.TCPlayer) {
                this.initVideo();
            } else {
                loadTcScript(() => {
                    this.initVideo();
                });
            }
        },
        initVideo() {
            const playerParm = {
                fileID: this.options.fileId,// 请传入需要播放的视频fileID 必须
                appID: '1256163091',// 请传入点播账号的appID 必须
            };
            setTimeout(() => {
                if (!this.player) {
                    this.player = TCPlayer(this.tcPlayerId, playerParm);
                } else {
                    this.player.loadVideoByID(playerParm);
                }
            });
        }
    },
};
</script>

<style scoped>
@import url("//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");
.tencent-player {
    width:650px;
    height:440px;
    margin: 0 auto;
}
</style>

• 点播播放器两个必传参数fileID和appID
• 报错Error Code:4000，可能是appID不对