hzwl-easy-player/dist/hzwl-easy-player.es.js

基于Vue 3的视频播放器组件，支持单屏和多屏播放模式

import { ref as C, reactive as N, computed as z, onMounted as L, nextTick as R, onBeforeUnmount as D, watch as j, createElementBlock as y, openBlock as d, normalizeClass as f, createCommentVNode as p, createElementVNode as a, Fragment as w, renderList as P } from "vue";
const q = (l, g) => {
  const E = l.__vccOpts || l;
  for (const [r, n] of g)
    E[r] = n;
  return E;
}, H = {
  key: 0,
  class: "player-wrapper"
}, V = ["id"], _ = ["id", "onClick"], Z = ["id", "onClick"], G = ["id", "onClick"], J = ["id", "onClick"], K = ["id", "onClick"], Q = {
  __name: "EasyPlayer",
  props: {
    playerId: {
      type: String,
      default: ""
    },
    videoUrl: {
      type: String,
      default: ""
    },
    videoBuffer: {
      type: Number,
      default: 0.2
    },
    videoBufferDelay: {
      type: Number,
      default: 1
    },
    showBandwidth: {
      type: Boolean,
      default: !0
    },
    showPerformance: {
      type: Boolean,
      default: !1
    },
    operateBtns: {
      type: Object,
      default: () => ({
        fullscreen: !0,
        screenshot: !1,
        play: !0,
        audio: !0,
        ptz: !1,
        quality: !1,
        performance: !0
      })
    },
    watermarkText: {
      type: String,
      default: ""
    },
    hasAudio: {
      type: Boolean,
      default: !0
    },
    isNotMute: {
      type: Boolean,
      default: !1
    },
    multiScreenOne: {
      type: Boolean,
      default: !1
    },
    multiScreenTwo: {
      type: Boolean,
      default: !1
    },
    multiScreenFour: {
      type: Boolean,
      default: !1
    },
    multiScreenSix: {
      type: Boolean,
      default: !1
    },
    multiScreenNine: {
      type: Boolean,
      default: !1
    },
    multiScreenSixteen: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["player-click"],
  setup(l, { expose: g, emit: E }) {
    const r = l;
    C(!1);
    const n = C(null);
    N({
      hasAudio: !0,
      isLive: !0,
      MSE: !1,
      WCS: !1,
      WASM: !0
    });
    const s = C(null), m = (t) => {
      s.value = t;
    }, F = () => {
      if (!s.value && !r.multiScreenOne) {
        console.warn("请先选择要全屏的播放器");
        return;
      }
      const t = r.multiScreenOne ? n.value[1] : n.value[s.value];
      if (!t) {
        console.error("播放器实例不存在");
        return;
      }
      t.setFullscreen(!0);
    }, x = () => {
      if (!s.value && !r.multiScreenOne) {
        console.warn("请先选择要暂停的播放器");
        return;
      }
      const t = r.multiScreenOne ? n.value[1] : n.value[s.value];
      if (!t) {
        console.error("播放器实例不存在");
        return;
      }
      t.pause();
    }, M = () => {
      if (!s.value && !r.multiScreenOne) {
        console.warn("请先选择要静音的播放器");
        return;
      }
      const t = r.multiScreenOne ? n.value[1] : n.value[s.value];
      if (!t) {
        console.error("播放器实例不存在");
        return;
      }
      t.setMute(!0);
    }, b = () => {
      if (!s.value && !r.multiScreenOne) {
        console.warn("请先选择要播放的播放器");
        return;
      }
      const t = r.multiScreenOne ? 1 : s.value, o = r.multiScreenOne ? n.value[1] : n.value[s.value];
      if (!o) {
        console.error("播放器实例不存在");
        return;
      }
      S[t] && x(), setTimeout((e) => {
        o.play(e).then(() => {
          S[t] = !0;
        }).catch((u) => {
          console.error(u), S[t] = !1;
        });
      }, 1e3, r.videoUrl);
    }, h = () => new Promise((t, o) => {
      n.value && (Object.values(n.value).forEach((e, u) => {
        e && (e.destroy(), S[u + 1] = !1);
      }), n.value = null), setTimeout(() => {
        t();
      }, 100);
    }), A = () => {
      h().then(() => {
        B(), b();
      });
    }, S = N({}), B = () => {
      let t = 1;
      r.multiScreenTwo ? t = 2 : r.multiScreenFour ? t = 4 : r.multiScreenSix ? t = 6 : r.multiScreenNine ? t = 9 : r.multiScreenSixteen && (t = 16);
      for (let o = 1; o <= t; o++) {
        S[o] = !1;
        const e = r.multiScreenOne ? r.playerId : `${r.playerId}${o}`, u = document.getElementById(e);
        if (!u) {
          console.error("Container element not found:", e);
          continue;
        }
        const c = new window.EasyPlayerPro({
          container: u,
          videoBuffer: r.videoBuffer,
          videoBufferDelay: Number(r.videoBufferDelay),
          decoder: "/js/EasyPlayer/decoder-pro.js",
          isResize: !0,
          loadingText: "加载中",
          debug: !1,
          debugLevel: "debug",
          useMSE: !1,
          useSIMD: !1,
          useWCS: !1,
          useWASM: !0,
          hasAudio: r.hasAudio,
          websocket1006ErrorReplay: !0,
          networkDelayTimeoutReplay: !0,
          useMThreading: !0,
          showBandwidth: r.showBandwidth,
          showPerformance: r.showPerformance,
          gpuDecoder: !0,
          operateBtns: r.operateBtns,
          timeout: 10,
          qualityConfig: ["普清", "高清", "超清"],
          forceNoOffscreen: !0,
          isNotMute: r.isNotMute,
          heartTimeout: 5,
          ptzClickType: "mouseDownAndUp",
          ptzZoomShow: !0,
          ptzMoreArrowShow: !0,
          ptzApertureShow: !0,
          ptzFocusShow: !0,
          pauseAndNextPlayUseLastFrameShow: !0,
          heartTimeoutReplayUseLastFrameShow: !0,
          replayUseLastFrameShow: !0,
          fullscreenWatermarkConfig: {
            text: r.watermarkText
          }
        });
        c.on("error", (i) => {
          console.error("EasyPlayer error:", i);
        }), c.on("fullscreen", function(i) {
          console.log("is fullscreen", i);
        }), c.on("playbackRate", (i) => {
          c.setRate(i);
        }), c.on("playbackSeek", (i) => {
          console.log("playbackSeek", i);
        }), n.value || (n.value = {}), n.value[o] = c;
      }
    }, O = () => new Promise((t, o) => {
      if (window.EasyPlayerPro) {
        console.log("EasyPlayerPro 已加载"), typeof Worker < "u" ? t(!0) : o(new Error("此浏览器不支持Web Workers"));
        return;
      }
      let e = 0;
      const u = 50, c = 100;
      console.log("等待EasyPlayerPro加载..."), new Promise((k, W) => {
        if (document.querySelector('script[src*="EasyPlayer-pro.js"]')) {
          k();
          return;
        }
        const v = document.createElement("script");
        v.src = "/js/EasyPlayer/EasyPlayer-pro.js", v.async = !0, v.onload = () => {
          k();
        }, v.onerror = (T) => {
          console.error("EasyPlayerPro脚本加载失败", T), W(T);
        }, document.head.appendChild(v);
      }).catch((k) => console.error("脚本加载错误:", k));
      const I = () => {
        if (e++, window.EasyPlayerPro) {
          console.log(`EasyPlayerPro 已加载，尝试了 ${e} 次`), typeof Worker < "u" ? t(!0) : o(new Error("此浏览器不支持Web Workers"));
          return;
        }
        if (e >= u) {
          console.error("EasyPlayerPro加载失败，请检查脚本是否正确引入"), o(new Error("Failed to load EasyPlayerPro"));
          return;
        }
        setTimeout(I, c);
      };
      I();
    }), U = z(() => ({
      multiScreenOne: r.multiScreenOne,
      multiScreenTwo: r.multiScreenTwo,
      multiScreenFour: r.multiScreenFour,
      multiScreenSix: r.multiScreenSix,
      multiScreenNine: r.multiScreenNine,
      multiScreenSixteen: r.multiScreenSixteen
    }));
    return L(async () => {
      try {
        await R(), await O(), B();
      } catch (t) {
        console.error("初始化EasyPlayer失败:", t);
      }
    }), D(() => {
      console.log("EasyPlayer组件卸载"), h().then(() => {
        console.log("播放器资源已释放");
      }).catch((t) => {
        console.error("播放器资源释放失败:", t);
      });
    }), j(() => r.videoUrl, async (t, o) => {
      if (console.log("视频URL变化:", o, "->", t), !t) {
        console.log("URL为空，不进行操作");
        return;
      }
      try {
        await O(), await h(), B(), b();
      } catch (e) {
        console.error("URL变化后初始化播放器失败:", e);
      }
    }), g({
      onPlayer: b,
      onPause: x,
      onDestroy: h,
      onMute: M,
      setFullscreen: F,
      onReplay: A
    }), (t, o) => (d(), y("div", {
      class: f(["bigbox", U.value])
    }, [
      l.multiScreenOne ? (d(), y("div", H, [
        a("div", {
          class: f(["player-box", { "border-selected": s.value === 1 }])
        }, [
          a("div", {
            id: l.playerId,
            class: "player",
            onClick: o[0] || (o[0] = (e) => m(1))
          }, null, 8, V)
        ], 2)
      ])) : p("", !0),
      l.multiScreenTwo ? (d(), y(w, { key: 1 }, P(2, (e) => a("div", {
        key: e,
        class: "player-wrapper"
      }, [
        a("div", {
          class: f(["player-box", { "border-selected": s.value === e }])
        }, [
          a("div", {
            id: `${l.playerId}${e}`,
            class: "player",
            onClick: (u) => m(e)
          }, null, 8, _)
        ], 2)
      ])), 64)) : p("", !0),
      l.multiScreenFour ? (d(), y(w, { key: 2 }, P(4, (e) => a("div", {
        key: e,
        class: "player-wrapper"
      }, [
        a("div", {
          class: f(["player-box", { "border-selected": s.value === e }])
        }, [
          a("div", {
            id: `${l.playerId}${e}`,
            class: "player",
            onClick: (u) => m(e)
          }, null, 8, Z)
        ], 2)
      ])), 64)) : p("", !0),
      l.multiScreenSix ? (d(), y(w, { key: 3 }, P(6, (e) => a("div", {
        key: e,
        class: "player-wrapper"
      }, [
        a("div", {
          class: f(["player-box", { "border-selected": s.value === e }])
        }, [
          a("div", {
            id: `${l.playerId}${e}`,
            class: "player",
            onClick: (u) => m(e)
          }, null, 8, G)
        ], 2)
      ])), 64)) : p("", !0),
      l.multiScreenNine ? (d(), y(w, { key: 4 }, P(9, (e) => a("div", {
        key: e,
        class: "player-wrapper"
      }, [
        a("div", {
          class: f(["player-box", { "border-selected": s.value === e }])
        }, [
          a("div", {
            id: `${l.playerId}${e}`,
            class: "player",
            onClick: (u) => m(e)
          }, null, 8, J)
        ], 2)
      ])), 64)) : p("", !0),
      l.multiScreenSixteen ? (d(), y(w, { key: 5 }, P(16, (e) => a("div", {
        key: e,
        class: "player-wrapper"
      }, [
        a("div", {
          class: f(["player-box", { "border-selected": s.value === e }])
        }, [
          a("div", {
            id: `${l.playerId}${e}`,
            class: "player",
            onClick: (u) => m(e)
          }, null, 8, K)
        ], 2)
      ])), 64)) : p("", !0)
    ], 2));
  }
}, $ = /* @__PURE__ */ q(Q, [["__scopeId", "data-v-c032e2ce"]]), ee = $, re = {
  install(l) {
    l.component("EasyPlayer", $), l.component("HzwlPlayer", $);
  }
};
export {
  $ as EasyPlayer,
  ee as HzwlPlayer,
  re as default
};