<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 width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></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.pause();
      this.player.src("");
      this.player.dispose();
    }
  },
};
</script>
<style lang="less" scoped>
.video-container {
  --plyr-color-main: #01c1b5;
}
.video-js {
  width: 100%;
  height: 2.1rem;
  overflow: hidden;
}

/deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: inherit !important;
  outline: none;
}

/deep/ .video-js .vjs-slider:focus {
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none;
}
</style>
