在vue中使用tcplayer

一. 引入tcplayer

1. 在index.html页面引入script标签（适合传统项目）
   script标签在如下网址查找
   https://cloud.tencent.com/document/product/881/20207#.E5.AF.B9.E6.8E.A5.E6.94.BB.E7.95.A5

2. 下载tcplayer，放入vue项目中，在需要的页面直接引入或者在mian.js中引入。（在vue项目中推荐这种用法）
   下载tcplayer.js地址如下
   https://cloud.tencent.com/document/product/881/20207#es-module
   下载后放入vue项目common文件夹下，若只在一个页面中使用可在使用的页面引入tcplayer，在最近的项目中我需要在多个页面使用tcplayer播放视频，监控和直播，而且有不同的需求，故在main.js中引用，方式如下

import { TcPlayer } from './common/TcPlayer-module-2.3.3'
Vue.prototype.TcPlayer = TcPlayer

二、将tcplayer封装成组件

1. 只有一个视频播放时

2. 有多个视频播放时

三、引用组件

1. 引用 TcPlayer 组件

2. 引用 TcPlayerUnit 组件

【参考文章】
Web 视频播放器概述