vue3使用xgPalyer實(shí)現(xiàn)截圖功能的方法詳解

更新時(shí)間：2024年02月01日 16:30:23 作者：山間板栗

這篇文章主要為大家詳細(xì)介紹了如何在vue3中使用xgPalyer截圖功能,以及自定義插件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

安裝及使用xgPalyer

安裝xgPalyer

安裝西瓜視頻播放器插件pnpm install xgPlayer@3.0.12-rc.0

使用xgPalyer

在頁(yè)面中引入依賴

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

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

具體使用

template代碼

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

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

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

放開截圖配置。

并配置，截圖后不自動(dòng)下載saveImg: false 以及允許跨域訪問videoAttributes: { crossOrigin: "anonymous" }

簡(jiǎn)要代碼如下

  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));

自定義插件，并注入

自定義插件

官方文檔介紹自定義插件在官方文檔的基礎(chǔ)上，簡(jiǎn)單做一點(diǎn)調(diào)整~

給xgPalyer注入插件

注入插件、并給插件傳入?yún)?shù)。

下面是省略的寫法

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

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

給自定義的插件，注入一些參數(shù)方法

player.value.registerPlugin(screenshotListPlugin, params);

在自定義插件中接收參數(shù)

constructor(args) {
    super(args);

    this.info = args.config; // 傳給這個(gè)插件的參數(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 {
  // 插件的名稱，將作為插件實(shí)例的唯一key值
  static get pluginName() {
    return "screenshotListPlugin";
  }

  static get defaultConfig() {
    return {
      // 掛載在controls的右側(cè)，如果不指定則默認(rèn)掛載在播放器根節(jié)點(diǎn)上
      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這個(gè)插件的參數(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é)點(diǎn)Vue模板data值
     */
    this.onIconClick = e => {
      console.log("class為screenshot-list元素點(diǎn)擊回調(diào)", e);
      const listExited = ["block"].includes(screenshotListDom.style.display);
      screenshotListDom.style.display = listExited ? "none" : "block";
    };

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

    // 對(duì)當(dāng)前插件根節(jié)點(diǎn)綁定click事件
    //TODO 插件實(shí)例化之后的一些邏輯

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

  destroy() {
    // 解綁事件等清理工作
    this.unbind(".screenshot-list", "click", this.onIconClick);
    // 播放器銷毀的時(shí)候一些邏輯
    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>
          `;
  }
}

自定義插件如何掛載vue組件

純html、css實(shí)現(xiàn)的頁(yè)面，過于原生態(tài)了。淺淺掛載一個(gè)vue組件，實(shí)現(xiàn)插件內(nèi)的元素展示。

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


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

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

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

ps. vue插件內(nèi)用的element-plus框架的組件需要單獨(dú)引入使用，且要再次引入對(duì)應(yīng)的css，否則既無樣式，組件也不會(huì)生效。例如

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

這篇文章寫得跟裹腳布一樣，又臭又長(zhǎng)。有點(diǎn)寫煩了。

掛載組件如何同父（祖）組件通訊

用 provide / inject 給組件通訊，只要是同一個(gè)祖先，都可以接收到

① 祖輩組件：暴露注冊(cè)方法provide("reloadFun", reloadFun);

② 子輩組件：注入方法 const reloadFun = inject("reloadFun");

剩下的就是，子輩和插件間的方法通訊了~~

介紹一個(gè)小方法 videoInfo.value.callReloadPage

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

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

到此為止了，白白

到此這篇關(guān)于vue3使用xgPalyer實(shí)現(xiàn)截圖功能的方法詳解的文章就介紹到這了,更多相關(guān)vue3 xgPalyer截圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: