import Player from "xgplayer";
import { Events, Plugin } from "xgplayer";

import "xgplayer/dist/index.min.css";

<template>
  <div id="mse" ref="videoPlayer" />
</template>

  // 播放器 基礎(chǔ)用法
  new Player({
    // el: videoPlayer.value,
    id: "mse",
    lang: "zh",
    width: "100%",
    height: "100%",
    // 默認靜音
    volume: 0,
    autoplay: false,
    videoInit: true,
    url: videoUrl || "",

    fluid: deviceDetection(),
    plugins: [],
    //傳入倍速可選數(shù)組
    playbackRate: [0.5, 0.75, 1, 1.5, 2]
  });

  const basicConfig = {
    //...
  };
  const screenShotConfig = {
    // 截圖配置
    screenShot: {
      saveImg: false, // 禁止截圖后下載圖片
      quality: 0.92,
      type: "image/png",
      format: ".png",
      position: Plugin.POSITIONS.CONTROLS_RIGHT
    },
    videoAttributes: {
      crossOrigin: "anonymous"
    }
  };

  new Player(Object.assign(basicConfig, screenShotConfig));

// 在video組件中，初始化組件
const vedioConfig = { //... } // 配置內(nèi)容省略
const player = new Player(vedioConfig);

const params = { //... }
// 方法二：調(diào)用接口注冊插件,并注入?yún)?shù)
player.value.registerPlugin(screenshotListPlugin, params);

constructor(args) {
    super(args);

    this.info = args.config; // 傳給這個插件的參數(shù)在args.config
}

import { createApp } from "vue";

import { Plugin } from "xgplayer";
import ScreenshotList from "./screenshotList.vue";
const { POSITIONS } = Plugin;

export default class screenshotListPlugin extends Plugin {
  // 插件的名稱，將作為插件實例的唯一key值
  static get pluginName() {
    return "screenshotListPlugin";
  }

  static get defaultConfig() {
    return {
      // 掛載在controls的右側(cè)，如果不指定則默認掛載在播放器根節(jié)點上
      position: POSITIONS.CONTROLS_RIGHT
    };
  }

  constructor(args) {
    super(args);
    this.vm = null;
    this.onScreenshot = this.onScreenshot.bind(this);

    this.player = args.player;
    this.videoInfo = args.config; // 暫存?zhèn)鹘o這個插件的參數(shù)，后續(xù)傳給vue組件使用
  }

  beforePlayerInit() {
    const screenshotListDom = this.find(".screenshot-plugin");
    const tipDom = this.find(".cut-num-tip");
    this.vm && this.vm.updatePopInfo(screenshotListDom, this.videoInfo, tipDom);
    // TODO 播放器調(diào)用start初始化播放源之前的邏輯
  }

  afterPlayerInit() {
    // TODO 播放器調(diào)用start初始化播放源之后的邏輯
  }

  // ... 其他插件方法

  onScreenshot(val) {
    // 找到掛載的組件，觸發(fā)截圖方法
    this.vm && this.vm.screenshotHanlde(val);
  }

  afterCreate() {
    const screenshotListDom = this.find(".screenshot-plugin");

    /**
     * 自定義插件 打開列表
     * root.__root__為根節(jié)點Vue模板data值
     */
    this.onIconClick = e => {
      console.log("class為screenshot-list元素點擊回調(diào)", e);
      const listExited = ["block"].includes(screenshotListDom.style.display);
      screenshotListDom.style.display = listExited ? "none" : "block";
    };

    // 對當前插件根節(jié)點內(nèi)部類名為.screenshot-list的元素綁定click事件
    this.bind(".screenshot-list", "click", this.onIconClick);

    // 對當前插件根節(jié)點綁定click事件
    //TODO 插件實例化之后的一些邏輯

    // 使用 Vue 組件
    const ScreenshotListComponent = createApp(ScreenshotList);
    this.vm = ScreenshotListComponent.mount(".screenshot-plugin");
  }

  destroy() {
    // 解綁事件等清理工作
    this.unbind(".screenshot-list", "click", this.onIconClick);
    // 播放器銷毀的時候一些邏輯
    super.destroy();
  }

  render() {
    return `<div>
              <button class="screenshot-list" style="position: relative;
                right: 6px;
                width: 85px;
                height: 30px;
                line-height: 26px;
                font-size: 12px;
                top: 5px;
                vertical-align: top;
                cursor: pointer;
                border-radius: 8px;
                background: transparent;
                color: #fff;
                right: 0;
                border: 2px solid #fff;
                text-align: center;
                "
              >
                查看錄像截圖
                <span class="cut-num-tip" style="
                  position: absolute;
                  width: 18px;
                  height: 18px;
                  line-height: 18px;
                  top: -12px;
                  right: -3px;
                  border-radius: 50%;
                  display: inline-block;
                  padding: 0 0px;
                  font-size: 12px;
                  text-align: center;
                  background-color: #FF5722;
                  color: #fff;
              ">0</span>
              </button>
              <div class="screenshot-plugin" style="
                display: none;
                width: 370px;
                height: 250px;
                position: absolute;
                top: -250px;
                right: 0px;
                background: #fff;
                border-radius: 4px;
              "></div>
            </div>
          `;
  }
}

import { createApp } from "vue";
import ScreenshotList from "./screenshotList.vue";


export default class screenshotListPlugin extends Plugin {
  // ...
  afterCreate() {

    // 在插件實例化后，把vue組件，掛載在實例化的插件元素上

    // 使用 Vue 組件
    const ScreenshotListComponent = createApp(ScreenshotList);
    this.vm = ScreenshotListComponent.mount(".screenshot-plugin");
  }
  
}

<script setup lang="ts">
import { ElPopconfirm } from "element-plus";
import "element-plus/dist/index.css";
</script>

  async function batchFunname() {
    try {
      addLoadingMask();
      const params = {  };
      await queryFun(params);
      message("成功", { type: "success", duration: 3000 });
      onSearch();
      
      
      // callReloadPage 這個方法流轉(zhuǎn)的時序是
      // 1. 祖輩（XXXComponent/index） 組件的暴露方法reloadFun
      // 2. video組件中，注入方法reloadFun
      // 3. video組件中，通過引入插件時，傳參給自定義插件
      // 4. 自定義插件在解構(gòu)時 (constructor) 暫存方法再videoInfo對象中
      // 5. 自定義插件，在截圖列表（screenshotList）的組件掛載在dom元素后，把videoInfo傳給 組件（screenshotList）
      // 6. 組件（screenshotList）接收到后，傳給hook
      // 7. hook中批量存證后，刷新表格頁面，展示最新的存證信息。
      // ps. 裹腳布都沒這么長

      setTimeout(() => {
        videoInfo.value.callReloadPage && videoInfo.value.callReloadPage();
      }, 1500);
    } catch (err) {
      console.error(err);
    } finally {
      loadingMask.value?.close();
    }
  }