vue 引入 tcplayer，并且实现视频点播，腾讯点播

这篇文章仅用于上传到 腾讯的视频点播，上传到腾讯视频请看上一篇文章，话不多说，直接上代码

<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,
        }
    },
    methods: {
        loadJS() {
            if (window.TCPlayer) {
                this.initVideo();
            } else {
                loadTcScript(() => {
                    this.initVideo();
                });
            }
        },
        initVideo() {
            const playerParm = {
                fileID: '3701925921297118545',
                appID: '1251109575',
                autoplay: this.options.autoplay ? true : false,

　　　　　　　　　　　　controlBar :{ //配置取消倍速

          　　　　　　　　playbackRateMenuButton : false, //是否显示播放速率选择按钮。

        　　　　　　},

            };
            setTimeout(() => {
                if (!this.player) {
                    this.player = TCPlayer(this.tcPlayerId, playerParm);
                } else {
                    this.player.loadVideoByID(playerParm);
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped>
@import url("//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");
</style>

 

这串代码可以用于组件化

<TencentPlayer :options="options" />
<!-- options: {
        fileID: 'xxxx',
        appID: 'xxxx',
        autoplay: true,
      } -->

 

最后感谢一些不知名的大神相助：

https://www.jianshu.com/p/3af7bc8a160e

https://www.boatsky.com/blog/77