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, this.playerParm);

          //继续播放
          this.player.on('playing',()=>{
          
            this.dialogTimes = 10

          })

          //播放结束
          this.player.on('ended',()=>{
            this.player.pause()
          })

        } else {
          this.player.loadVideoByID(this.playerParm);
        }

      },100);


      // var i = 0
      // var j = 0
      // this.dialogTime = Number( this.dialogTime ) // 360

      // if( i < this.dialogTime ){

      //   setInterval(()=>{
      //     this.player.pause()
      //     j = 10
      //     i += j
      //   },10000)

      // }

      // clearInterval();

      //设置定时暂停
      setInterval(()=>{
        if( this.dialogTimes > 0 ){
          this.dialogTimes = this.dialogTimes - 1
        }
      },1000)

      setInterval(()=>{
      
        if( this.dialogTimes == 0 ){
          this.player.pause()
        }

      },1000)

        }
    },
};
script>
<style lang="scss" scoped>
@import url("//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");
style>

这串代码可以用于组件化

<TencentPlayer :options="options" />

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

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

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