html 和 vue 使用播放器 TcPlayer

#### TcPlayer视频播放器

引入TcPlayer库

<script src="./js/TcPlayer-2.4.5.js" charset="utf-8"></script>

HTML结构

<section v-if="videoShow" style="position: fixed;top: 0;bottom: 0;margin: auto 0;z-index: 999999;width: 100%;height: 100%;background: rgba(0,0,0,.6)">
      <!-- 关闭视频播放器的按钮 -->
      <img src="images/close.png" @click="videoShow = false" style="position: absolute;right: 20px;top: 20px;z-index: 100;width: 40px;">
      <!-- 视频播放区域 -->
      <div id="id_TCP_video" style="width:100%; height:100%;"></div>
</section>

初始化TcPlayer

new TcPlayer('id_TCP_video', {
    "mp4": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",  <!-- 设置视频的播放地址 -->
    "live": false,  <!-- 设置为非直播模式 -->
    "autoplay" : true,  <!-- 视频自动播放 -->
    "pausePosterEnabled" : false,  <!-- 暂停时不显示封面图 -->
    "poster": {  <!-- 设置视频封面相关属性 -->
        "style": "stretch",
        "src": ''
    },
    "width" : '100%',  <!-- 视频宽度 -->
    "height" : '100%',  <!-- 视频高度 -->
    "wording": {  <!-- 设置播放器的提示文本 -->
        2032: "Failed to request video, please check network",
        2048: "Failed to request m3u8 file, it may be a network error or cross-domain problem",
        13: "The live broadcast has ended, please come back later."
    }
});

1. 参考资源

- [简书文章链接](https://www.jianshu.com/p/fc6567ae8b57) - 一个关于如何在Vue中使用TCPlayer的指南

- [官方文档](https://cloud.tencent.com/document/product/881/20207#es-module) - 腾讯TCPlayer的官方文档

2. 安装和引入

首先下载es版本的`tcplayer.js`。

// 在main.js中引入
import { TcPlayer } from './static/js/TcPlayer-module-2.4.5.js'
Vue.prototype.TcPlayer = TcPlayer  // 将TCPlayer添加到Vue的原型中，以便在任何组件中都可以使用

3. 使用TCPlayer

HTML部分:

<div class="video player" id="tcplayer" ref="tcplayer"></div>

Vue组件部分:

data() {
  return {
    player: '',  // 播放器实例
    payUrl: '',  // 视频播放地址
    posterUrl:'',  // 视频封面图地址
    autoplay: false,  // 是否自动播放
  };
},
watch: {
  playVideo: function(newVal) {  // 监听playVideo变量的变化
    this.play();
  }
},
destroyed() {
  this.player.destroy();  // 组件销毁时，也销毁播放器实例
},
methods: {
  play() {
    let dom = document.getElementById("tcplayer");  // 获取播放容器
    while (dom.hasChildNodes()) {  // 清空播放容器
      dom.removeChild(dom.firstChild);
      this.player.destroy();
    }
    if (JSON.stringify(this.playVideo) != "{}") {  // 如果有播放内容
      this.player = new this.TcPlayer("tcplayer", {  // 创建播放器实例
        // 配置播放器属性
        "mp4_sd": this.payUrl,
        "live": false,
        "autoplay" : this.autoplay,
        "pausePosterEnabled" : true,
        "poster":{"style":"stretch", "src": this.posterUrl},
        "width" :  '100%',
        "height" : '100%',
        "wording": {
          2032: "Failed to request video, please check network",
          2048: "Failed to request m3u8 file, it may be a network error or cross-domain problem",
          13: "The live broadcast has ended, please come back later.",
        },
      });
    }
  },
  chooseLive: function(item) {
     this.payUrl = item.pic
     this.posterUrl = item.poster
     this.player.destroy();
     this.play();
  },
},

4. 样式部分

.player{
  position: relative;
  width: 100%;
  height: 26vh;

  /deep/ .video {
    width: 100%;
    height: 100%;

    .vcp-player {
      width: 100%;
      height: 100%;

      video {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }
}

按照上述步骤和注释，可以在Vue项目中成功地使用腾讯的TCPlayer进行视频播放。