cione-comp-lib/es/packages/co-video-xgplayer/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, watch, nextTick, watchEffect, onUnmounted, toRefs, openBlock, createElementBlock, normalizeClass, createCommentVNode } from "vue";
import Player from "../../node_modules/xgplayer/dist/index.mjs";
import FlvPlyer from "../../node_modules/xgplayer-flv.js/dist/index.mjs";
import HlsPlayer from "../../node_modules/xgplayer-hls.js/dist/index.mjs";
import { SrsRtcPlayerAsync } from "./srs.sdk.mjs";
import { getStaticUrl } from "../tools.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoVideoXgplayer",
  props: {
    url: {
      type: String,
      require: true
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    volume: {
      type: Number,
      default: 0
    },
    loop: {
      type: Boolean,
      default: false
    },
    controls: {
      type: Boolean,
      default: true
    },
    poster: {
      type: String,
      require: true
    },
    ratio: {
      type: String,
      require: true
    },
    width: {
      type: Number
    },
    height: {
      type: Number
    }
  },
  setup(props) {
    const XGUrl = ref(props.url);
    const playerRef = ref(null);
    const show = ref(true);
    const containId = ref("video-xgplayer__" + new Date().valueOf());
    let player = null;
    const init = async () => {
      if (!playerRef.value)
        return;
      if (player)
        player.destroy();
      let reg = /mp4|webm|ogg|flv|hls|m3u8/;
      const url = XGUrl.value;
      const protocol = url.substring(0, url.indexOf(":"));
      let suffix = reg.test(url) ? url.match(reg)[0].toLowerCase() : null;
      let type = protocol === "webrtc" ? protocol : suffix;
      const mp4Types = ["mp4", "webm", "ogg"];
      const flvTypes = ["flv"];
      const hlsTypes = ["hls", "m3u8"];
      let proxyUrl = await getStaticUrl(XGUrl.value);
      let defaultConfig = {
        id: containId.value,
        lang: "zh-cn"
      };
      if (type === "webrtc") {
        let sdk = null;
        player = new Player({
          ...defaultConfig,
          ...props,
          ...{ url: "", ignores: ["time", "progress"] }
        });
        player.once("ready", () => {
          if (sdk)
            sdk.close();
          sdk = new SrsRtcPlayerAsync();
          player.video.srcObject = sdk.stream;
          player.attachVideo();
          sdk.play(proxyUrl).then(function(session) {
            player.autoplay = props.autoplay;
          }).catch(function(reason) {
            sdk.close();
            console.error(reason);
          });
        });
      } else {
        let config = { ...defaultConfig, ...props };
        if (mp4Types.includes(type)) {
          player = new Player(config);
        } else if (flvTypes.includes(type)) {
          player = new FlvPlyer(config);
        } else if (hlsTypes.includes(type)) {
          player = new HlsPlayer(config);
        } else {
          player = new Player(config);
          console.log("\u4E0D\u652F\u6301\u8BE5\u89C6\u9891\u683C\u5F0F\u6216\u5219\u5730\u5740\u8DE8\u57DF\u5904\u7406!");
        }
      }
    };
    const updataXGUrl = (newUrl) => {
      XGUrl.value = newUrl;
      init();
    };
    watch(
      () => props.autoplay,
      () => {
        init();
      }
    );
    watch(
      () => props.loop,
      () => {
        init();
      }
    );
    watch(
      () => props.controls,
      () => {
        init();
      }
    );
    watch(
      () => props.poster,
      () => {
        init();
      }
    );
    watch(
      () => props.ratio,
      () => {
        show.value = false;
        nextTick(() => {
          show.value = true;
          init();
        });
      }
    );
    watchEffect(() => {
      XGUrl.value = props.url;
      init();
    });
    onUnmounted(() => {
      if (player)
        player.destroy();
    });
    return {
      playerRef,
      containId,
      updataXGUrl,
      show,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = {
  class: "co-video-xgplayer",
  ref: "iframeRef"
};
const _hoisted_2 = ["id"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", _hoisted_1, [
    _ctx.show ? (openBlock(), createElementBlock("div", {
      key: 0,
      id: _ctx.containId,
      class: normalizeClass(["container", _ctx.ratio]),
      ref: "playerRef"
    }, null, 10, _hoisted_2)) : createCommentVNode("", true)
  ], 512);
}
var VideoXgPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-55d339d2"]]);
export { VideoXgPlayer as default };