// 安裝
npm install vue-video-player@5.0.1 --save

// 在main.js中全局引入
import VideoPlayer from 'vue-video-player/src';
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'

Vue.use(VideoPlayer)

<template>
  <div class="player">
    <video-player
      ref="videoPlayer"
      class="player-video"
      :playsinline="false"
      :options="playOptions"
      @ready="onPlayerReady"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnd($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @statechanged="playerStateChanged($event)"
    />
  </div>
</template>

<script>
export default {
  props: {
    path: {  // 傳入的地址
      type: String,
      default: "",
    },
    lastTime: {  // 傳入的上次播放位置
      type: Number,
      default: 0,
    },
  },
  components: {},
  data() {
    return {
      playedTime: this.lastTime,
      currentTime: 0,
      maxTime: 0,
      playOptions: {
        height: "200px",
        width: "100%",
        playbackRates: [1.0], // 可選的播放速度
        autoplay: true, // 如果為true,瀏覽器準備好時開始回放
        muted: false, // 默認情況下靜音播放
        loop: false, // 是否視頻一結(jié)束就重新開始
        preload: "auto", // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)，auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值，值應(yīng)該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如"16:9"或"4:3"）
        fluid: true, // 當true時，Video.js player將擁有流體大小，換句話說，它將按比例縮放以適應(yīng)其容器
        sources: [
          {
            type: "video/mp4", // 類型
            src: require("./1.mp4"), // url地址，在使用本地的資源時，需要用require()引入，否則控制臺會報錯
          },
        ],
        poster: "./gcy-logo-200.png", // 設(shè)置封面地址
        notSupportedMessage: "此視頻暫無法播放，請稍后再試", // 允許覆蓋Video.js無法播放媒體源時顯示的默認信息
        controlBar: {
          currentTimeDisplay: true,
          progressControl: true,  // 是否顯示進度條
          playbackRateMenuButton: true, // 是否顯示調(diào)整播放倍速按鈕
          timeDivider: true, // 當前時間和持續(xù)時間的分隔符
          durationDisplay: true, // 顯示持續(xù)時間
          remainingTimeDisplay: true, // 是否顯示剩余時間功能
          fullscreenToggle: true, // 是否顯示全屏按鈕
        },
      },
    };
  },
  computed: {
  },
  mounted() {
    this.getData()  // 調(diào)用獲取地址的接口，然后修改播放器配置中的src屬性
  },
  methods: {
    // 準備好了
    onPlayerReady() {
      console.log("準備好了");
    },
    // 視頻播放
    onPlayerPlay(player) {
      console.log('播放了');
      console.log(player);
      let playTime = 0;
        if (
          Number(Math.floor(this.playedTime)) ===
          Number(Math.floor(player.duration()))
        ) {
          this.playedTime = 0;
          playTime = 0;
        } else if (
          Number(Math.floor(player.currentTime())) !==
          Number(Math.floor(this.playedTime))
        ) {
          playTime = this.playedTime;
          player.currentTime(playTime)
        }
    },
    // 視頻暫停的
    onPlayerPause(player) {
      console.log('暫停中');
      console.log(player);
      this.playedTime = player.currentTime();
    },
    // 視頻播放完
    onPlayerEnd(player) {
      console.log('播放結(jié)束了');
      console.log(player);
    },
    // DOM元素上的readyState更改導(dǎo)致播放停止
    onPlayerWaiting(player) {
      console.log("播放停止中");
      console.log(player);
    },
    // 視頻已開始播放
    onPlayerPlaying(player) {
      console.log("開始播放了");
      console.log(player);
    },
    // 當播放器在當前播放位置下載數(shù)據(jù)時觸發(fā)
    onPlayerLoadeddata(player) {
      console.log("開始下載數(shù)據(jù)");
      console.log(player);
    },
    // 當前播放位置發(fā)生變化時觸發(fā)
    onPlayerTimeupdate(player) {
      console.log("播放位置變化了");
      console.log(player);
      let timeDisplay = player.currentTime();
        if (timeDisplay - this.currentTime > 1) {
            player.currentTime(this.currentTime > this.maxTime ? this.currentTime : this.maxTime);
        }
        this.currentTime = player.currentTime();
        this.maxTime = this.currentTime > this.maxTime ? this.currentTime : this.maxTime;
    },
    //播放狀態(tài)改變
    playerStateChanged(playerCurrentState) {
      console.log("播放狀態(tài)變化了");
      console.log(playerCurrentState);
    },
    // 手動暫停視頻的播放
    pause() {
      // 視頻播放器的方法調(diào)用，要使用this.$refs.videoPlayer.player這個對象去調(diào)用
      this.$refs.videoPlayer.player.pause()
    }
  },
};
</script>

<style lang="scss" scoped>
</style>

// 安裝
npm install dplayer --save

// 直接在組件中引入

// dplayer.vue

<template>
  <div :id="flag"></div>
</template>

<script>
import DPlayer from "dplayer";

export default {
  props: {
    flag: {  // 每個dplayer的id不可以重復(fù)
      type: String,
      default: "",
    },
    lastTime: {  // 上次播放到的時間
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      dp: null,
      playedTime: this.lastTime,
    };
  },
  mounted() {},
  methods: {
    async init(id) {
      let currentTime = 0;
      let maxTime = 0;
      let res = await api();  // 調(diào)用獲取視頻的地址
      let src = res.data.path;
      this.dp = new DPlayer({
        container: document.getElementById(this.flag),  // 播放器容器元素
        hotkey: true,  // 開啟熱鍵，支持快進、快退、音量控制、播放暫停，默認是true
        lang: "zh-cn",  // 可選值：'en'、'zh-cn'、'zh-tw'
        screenshot: false,  // 開啟截圖，如果開啟，視頻和視頻封面需要允許跨域 
        playbackSpeed: [0.75, 1, 1.25, 1.5, 2, 3],  // 可選的視頻播放倍速，可以設(shè)置自定義的數(shù)組
        video: {  // 視頻信息，更多可以參考官網(wǎng)：https://dplayer.diygod.dev/zh/guide.html
          url: src,  // 視頻地址
        },
      });
      // 監(jiān)聽視頻開始播放
      this.dp.on("play", () => {
        let playTime = 0;
        if (
          Number(Math.floor(this.playedTime)) ===
          Number(Math.floor(this.dp.video.duration))
        ) {
          this.playedTime = 0;
          playTime = 0;
        } else if (
          Number(Math.floor(this.dp.video.currentTime)) !==
          Number(Math.floor(this.playedTime))
        ) {
          playTime = this.playedTime;
          this.dp.seek(playTime);
        }
      });
      // 監(jiān)聽視頻暫停
      this.dp.on("pause", () => {
        this.playedTime = this.dp.video.currentTime;
      });
      // 設(shè)置不可以快進（timeupdate：當前播放位置更改時觸發(fā)）
      this.dp.on("timeupdate", () => {
        let timeDisplay = this.dp.video.currentTime;
        if (timeDisplay - currentTime > 1) {
          this.dp.video.currentTime =
            currentTime > maxTime ? currentTime : maxTime;
          this.dp.notice("禁止快進", 2000);
        }
        currentTime = this.dp.video.currentTime;
        maxTime = currentTime > maxTime ? currentTime : maxTime;
      });
      // 快進的提示，在禁止快進的提醒存在時不顯示
      this.dp.on("notice_show", function (e) {
        var text = e.innerHTML;
        if (
          "禁止快進" != text &&
          (text.indexOf("快進") > -1 || text.indexOf("快退") > -1)
        ) {
          e.style.display = "none";
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>