【Vue2 + TCPlayer】实现视频云点播功能

使用：腾讯云，本文基于VUE2

需求：利用云点播制作视频

文档：https://cloud.tencent.com/document/product/266/58772

demo: https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/build/index.html

步骤：

1.在页面中引入文件

(1) 先下载 js 文件，将文件放入到该项目中合适的位置

     然后将该 js 文件引入到 .vue文件中。参考文档如下：

<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css" rel="stylesheet">
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.2.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js"></script>

(2) 如下所示：

<!--分别将js和css文件引入到 .vue中-->
<script>
    import { TCPlayer } from "../../../js/tcplayer.v4.2.1.min";  //路径
</script>
<style scoped>
    @import "/static/css/tcplayer.min.css"; //路径
</style>

2.在需要展示播放器的页面位置放置播放器容器

<!--展示页面放在template中，内里用唯一父元素包裹-->
<template>
  <div>
    <video id="player-container-id" width="100%" height="100%"></video>
  </div>
</template>

3.播放器初始化 (通过url地址)

<script>
  export default{
    data(){
      return{
        videoId: "", // 视频Id
        playUrl: "", //视频地址
        TCPlayer: null, //放入全局
      }
    },
    methods:{
      init(){
        this.getDetail();
      },
      async getDetail(){
         this.initTCPlayer();
      }
      initTCPlayer() {
         this.TCPlayer = TCPlayer("player-container-id", {
           plugins: {
             ProgressMarker: true, //控制进度条显示
             ContextMenu: {
               mirror: true,
               statistic: true,
             },
             DynamicWatermark: {
               speed: 0.2,
               content: " power system ",
             },
           },
           controlBar: {
             QualitySwitcherMenuButton: true,
           },
           autoplay: true,
           language: "en",
         });
         this.TCPlayer.src(this.playUrl);
         },
       },
       destroyed() {
         //页面销毁，同时也销毁video.js对象
         this.TCPlayer.dispose();
       },
     }
</script>