mteacher/src/components/video-tcplayer.vue

<template>
  <div class="video-container">
    <video ref="video" :id="videoID" :src="src" :class="className" :preload="preload" :poster="poster" playsinline webkit-playsinline :style="styleValue" />
  </div>
</template>
<script>
import TCPlayer from "tcplayer.js";
// import "tcplayer.js/dist/tcplayer.css";y
export default {
  name: "video-player",
  props: {
    setting: {
      type: Object,
      default: () => {},
    },
    className: String,
    styleValue: String,
    src: String,
    poster: String,
    controls: Boolean,
    height: String,
    fullscreen: Boolean,
    preload: {
      type: String,
      default: "auto",
    },
    currentTime: {
      type: Boolean,
      default: true,
    },
    playLarge: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      videoID: "video" + Date.now() + Math.floor(Math.random() * 100),
      player: null,
    };
  },
  mounted() {
    this.init();
  },
  updated() {
    this.init();
  },
  methods: {
    init() {
      const Button = TCPlayer.getComponent("Button");
      const BigPlayButton = TCPlayer.getComponent("BigPlayButton");
      BigPlayButton.prototype.createEl = function () {
        var el = Button.prototype.createEl.call(this);
        let _html =
          '<button><svg t="1644397862160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3095" width="64" height="64"><path d="M298.666667 247.04V682.666667a42.666667 42.666667 0 0 1-85.333334 0V170.666667a42.666667 42.666667 0 0 1 65.024-36.352l554.666667 341.333333a42.666667 42.666667 0 0 1 0 72.704l-554.666667 341.333333a42.666667 42.666667 0 0 1-44.714666-72.704L729.258667 512 298.666667 247.04z" p-id="3096" fill="#ffffff"></path></svg></button>';

        el.appendChild(
          TCPlayer.dom.createEl("div", {
            className: "vjs-button-icon",
            innerHTML: _html,
          })
        );
        return el;
      };
      this.player = TCPlayer(this.videoID, {
        appID: "",
        controls: true,
      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
      if (this.player) {
        this.player.src(this.src); // url 播放地址
        this.player.poster(this.poster || "");
        // this.player.elements.container ? (this.player.elements.container.style.height = this.height || "2rem") : null;

        this.player.on("play", () => {
          this.$emit("play");
        });

        // 初步加载时
        // this.player.one('loadedmetadata', () => {
        //   console.log(' Loading metadata');
        // });

        // 视频播放时加载
        // this.player.on('timeupdate', () => {
        // });

        // 视频播放结束
        this.player.on("ended", () => {
          this.$emit("ended");
        });
      }
    },
    onpause() {
      this.player.pause();
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
      this.player.pause();
      this.player.src("");
    }
  },
};
</script>
<style lang="less" scoped>
.video-container {
  --plyr-color-main: #01c1b5;
}
.video-js {
  width: 100%;
  height: 2.1rem;
  overflow: hidden;
}
</style>