vue3使用xgPalyer实现截图功能的方法详解

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

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

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

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

    fluid: deviceDetection(),
    plugins: [],
    //传入倍速可选数组
    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 = { //... } // 配置内容省略
const player = new Player(vedioConfig);

const params = { //... }
// 方法二：调用接口注册插件,并注入参数
player.value.registerPlugin(screenshotListPlugin, params);

constructor(args) {
    super(args);

    this.info = args.config; // 传给这个插件的参数在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的右侧，如果不指定则默认挂载在播放器根节点上
      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; // 暂存传给这个插件的参数，后续传给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 播放器调用start初始化播放源之前的逻辑
  }

  afterPlayerInit() {
    // TODO 播放器调用start初始化播放源之后的逻辑
  }

  // ... 其他插件方法

  onScreenshot(val) {
    // 找到挂载的组件，触发截图方法
    this.vm && this.vm.screenshotHanlde(val);
  }

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

    /**
     * 自定义插件 打开列表
     * root.__root__为根节点Vue模板data值
     */
    this.onIconClick = e => {
      console.log("class为screenshot-list元素点击回调", e);
      const listExited = ["block"].includes(screenshotListDom.style.display);
      screenshotListDom.style.display = listExited ? "none" : "block";
    };

    // 对当前插件根节点内部类名为.screenshot-list的元素绑定click事件
    this.bind(".screenshot-list", "click", this.onIconClick);

    // 对当前插件根节点绑定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 这个方法流转的时序是
      // 1. 祖辈（XXXComponent/index） 组件的暴露方法reloadFun
      // 2. video组件中，注入方法reloadFun
      // 3. video组件中，通过引入插件时，传参给自定义插件
      // 4. 自定义插件在解构时 (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();
    }
  }