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() {
      this.playerParm = {
        // this.fileID 3701925921457886570
        poster: ‘’, //视频封面
        fileID: ‘’, //视频播放的id，后端提供
        appID: ‘’, //视频播放的appid，后端提供
        autoplay: true, // 是否自动播放
        controlBar: {
          playbackRateMenuButton: false, //是否显示播放速率选择按钮。
        },
        plugins: {
          ContinuePlay: {
            auto: false, //是否在播放时自动续播
            text: "上次看到", // 提示文案
            btnText: "恢复播放", // 按钮文案
          },
        },
      };


      
       setTimeout(() => {
          if (!this.player) {
            this.player = TCPlayer(this.tcPlayerId, this.playerParm);


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




    },

};
</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,
      } -->

 

新增了 点播视频 防止滑动到未看见的节点上去，具体不懂可以看上面怎么应用

// 防止拖动到未观看的位置 时间是秒
          this.player.on('seeking',()=>{
            if(this.player.currentTime() >  30 ){
              this.player.currentTime( 30 );
            }
          })

　　

 新增了 文档地址:https://video.qcloud.com/download/docs/QVOD_Player_Web_SDK_Developer_Guide.pdf

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

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

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