在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. 只有一个视频播放时

<template>
  <div
    class="player"
    :style="'width:' + widthHeigt[0] + '%' + 'height:' + widthHeigt[1] + '%'"
  >
    <div class="video" id="tcplayer" ref="tcplayer"></div>
  </div>
</template>

<script>
// import { TcPlayer } from '../common/TcPlayer-module-2.3.3'
export default {
  name: "TcPlayer",
  components: {},
  props: {
    widthHeigt: {
      type: Array,
      default: () => {
        return [300, 100];
      }
    },
    playVideo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      player: ""
    };
  },
  created() {},
  watch: {
    playVideo: function(newVal) {
      this.play();
    }
  },
  mounted() {
    this.play();
  },
  methods: {
    play() {
      let dom = document.getElementById("tcplayer");
      // let dom = this.$refs.tcplayer;
      // console.log(dom);
      while (dom.hasChildNodes()) {
        //当div下还存在子节点时 循环继续
        dom.removeChild(dom.firstChild);
        // this.player.destroy();
      }
      // console.log(JSON.stringify(this.playVideo));
      let objectString = JSON.stringify(this.playVideo);
      if (objectString != "{}") {
        this.player = new this.TcPlayer("tcplayer", {
          m3u8_sd: this.playVideo.m3u8_sd, //请替换成实际可用的播放地址
          m3u8_hd: this.playVideo.m3u8_hd,
          // flv_sd: this.playVideo.flv_sd, //请替换成实际可用的播放地址
          // flv_hd: this.playVideo.flv_hd, //请替换成实际可用的播放地址
          autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
          // poster: "http://www.test.com/myimage.jpg",
          flash: false,
          h5_flv: true,
          width: this.widthHeigt[0] + "%", //视频的显示宽度，请尽量使用视频分辨率宽度
          height: this.widthHeigt[1] + "%", //视频的显示高度，请尽量使用视频分辨率高度
          live: true,
          volume: 0,
          clarity: "sd",
          wording: {
            2: "摄像头连接网络不稳定",
            1002: "摄像头连接网络不稳定，请切换清晰度"
          }
        });
      }
    }
  },
  destroyed() {
    // 页面销毁，同时也销毁 TcPlayer
    this.player.destroy();
  }
};
</script>
<style lang="scss" scoped>
.player {
  width: 100%;
  height: 100%;
  ::v-deep .video {
    width: 100%;
    height: 100%;
    .vcp-player {
      width: 100%;
      height: 100%;
      video {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }
}
</style>

2. 有多个视频播放时

<template>
  <div
    class="player"
    :style="'width:' + widthHeigt[0] + '%;' + 'height:' + widthHeigt[1] + '%;'"
  >
    <div class="video" :id="'tcplayer' + index" ref="tcplayer"></div>
  </div>
</template>

<script>
// import { TcPlayer } from '../common/TcPlayer-module-2.3.3'
export default {
  name: "TcPlayerUnit",
  components: {},
  props: {
    widthHeigt: {
      type: Array,
      default: () => {
        return [300, 100];
      }
    },
    playVideo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    index: {
      type: Number,
      default: {
        return: 0
      }
    }
  },
  data() {
    return {
      player: ""
    };
  },
  created() {},
  mounted() {
    this.play();
  },
  watch: {
    playVideo: function(newVal) {
      // console.log(newVal);
      this.play();
    }
  },
  methods: {
    play() {
      let dom = document.getElementById("tcplayer" + this.index);
      while (dom.hasChildNodes()) {
        // 当存在子节点时 销毁视频
        this.player.destroy();
      }
      // console.log(dom);
      // console.log("tcplayer" + this.index);
      this.player = new this.TcPlayer("tcplayer" + this.index, {
        m3u8_sd: this.playVideo.m3u8_sd, //请替换成实际可用的播放地址
        m3u8_hd: this.playVideo.m3u8_hd,
        // flv_sd: this.playVideo.flv_sd, //请替换成实际可用的播放地址
        // flv_hd: this.playVideo.flv_hd, //请替换成实际可用的播放地址
        autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        // poster: "http://www.test.com/myimage.jpg",
        flash: false,
        h5_flv: true,
        width: this.widthHeigt[0] + "%", //视频的显示宽度，请尽量使用视频分辨率宽度
        height: this.widthHeigt[1] + "%", //视频的显示高度，请尽量使用视频分辨率高度
        live: true,
        volume: 0,
        clarity: "sd",
        controls: "none",
        wording: {
          2: "摄像头连接网络不稳定",
          1002: "摄像头连接网络不稳定，请切换清晰度"
        }
      });
    }
  },
  destroyed() {
    // 页面销毁，同时也销毁 TcPlayer
    this.player.destroy();
  }
};
</script>
<style lang="scss" scoped>
.player {
  ::v-deep .video {
    width: 100%;
    height: 100%;
    .vcp-player {
      width: 100%;
      height: 100%;
      video {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }
}
</style>

三、引用组件

1. 引用 TcPlayer 组件

<tc-player
   ref="tcplayer"
   :playVideo="playVideo"
   :widthHeigt="[100, 100]"
></tc-player>

2. 引用 TcPlayerUnit 组件

<tc-player-unit
   :ref="'tcplayer' + index"
     :index="index"
     :playVideo="item"
     :widthHeigt="[100, 100]"
></tc-player-unit>

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