vue-cli中使用腾讯TcPlayer播放器

1、引入js文件

在index.html头部引入库js

  <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js"
    charset="utf-8"></script>

2、在main.js配置

//将其挂载到全局
const TcPlayer = window.TcPlayer
Vue.prototype.TcPlayer = TcPlayer
//

3、自行封装的播放器组件

VideoPlayer.vue

<template>
  <div id="video_container"></div>
</template>
<script>
export default {
  name: 'VideoPlayer',
  props: {
    url: {
      type: String,
      required: true,
      default: "rtmp://58.200.131.2:1935/livetv/hunantv"
    },
    width: {
      type: Number,
      required: false,
      default: 500
    },
    height: {
      type: Number,
      required: false,
      default: 500
    }
  },
  mounted () {
    new this.TcPlayer('video_container', {
      "rtmp": this.url,
      "autoplay": true,
      "width": this.width,
      "height": this.height
    });
  }
}
</script>

4、在其他组件中使用

<template>
  <div id="app">
    <VideoPlayer :url='videoUrl' />
  </div>
</template>

<script>
import VideoPlayer from './components/VideoPlayer.vue'

export default {
  name: 'App',
  components: {
    VideoPlayer
  },
  data () {
    return {
      videoUrl: 'rtmp://117.132.5.213:1935/live/openUrl/WFZqpGg'
    }
  },
}
</script>