mteacher/src/components/video.vue

<template>
  <div class="video-container">
    <video
      ref="video"
      :src="src"
      :class="className"
      :preload="preload"
      :poster="poster"
      :style="styleValue"
    />
  </div>
</template>
<script>
import Plyr from "plyr";
import "plyr/dist/plyr.css";
import { browser } from "@/common/common";
export default {
  name: "video-player",
  props: {
    setting: {
      type: Object,
      default: () => {},
    },
    className: String,
    styleValue: String,
    src: String,
    poster: String,
    controls: Boolean,
    height: String,
    fullscreen: {
      type: Boolean,
      default: true,
    },
    preload: {
      type: String,
      default: "auto",
    },
    currentTime: {
      type: Boolean,
      default: true,
    },
    playLarge: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.init();
  },
  updated() {
    this.init();
  },
  methods: {
    init() {
      let controls = ["play", "progress", "captions"];
      if (this.playLarge) {
        controls.push("play-large");
      }
      console.log(this.currentTime, "1212");
      if (this.currentTime) {
        controls.push("current-time");
      }
      if (browser().android && this.fullscreen) {
        controls.push("fullscreen");
      }
      this.player = new Plyr(this.$refs.video, {
        controls: controls,
        invertTime: false,
        ...this.setting,
      });
      this.player.elements.container
        ? (this.player.elements.container.style.height = this.height || "2rem")
        : null;

      this.player.on("play", () => {
        this.$emit("play");
      });
    },
    onpause() {
      this.player.pause();
    },
  },
  beforeDestroy() {
    // this.player.destroy();
    this.player.pause();
    this.player.src = "";
    this.player.restart();
    // window.stop();
  },
};
</script>
<style lang="less" scoped>
.video-container {
  --plyr-color-main: #01c1b5;
}
</style>