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

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

import { defineComponent, toRefs, ref, watchEffect, onMounted, openBlock, createElementBlock, createElementVNode, normalizeClass } from "vue";
import DPlayer from "../../node_modules/dplayer/dist/DPlayer.min.mjs";
import Hls from "../../node_modules/hls.js/dist/hls.mjs";
import flvjs from "../../node_modules/flv.js/dist/flv.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
window.Hls = Hls;
window.flvjs = flvjs;
const _sfc_main = defineComponent({
  name: "CoVideoDPlayer",
  props: {
    ratio: {
      type: String,
      require: true
    },
    volume: {
      type: Number,
      require: true
    },
    cusControls: {
      type: Boolean,
      default: true
    },
    autoplay: {
      type: Boolean,
      require: false
    },
    loop: {
      type: Boolean,
      require: false
    },
    posterSrc: {
      type: String,
      require: true
    },
    url: {
      type: String,
      require: true
    }
  },
  setup(props) {
    const { autoplay, posterSrc, cusControls, volume } = toRefs(props);
    const DPlayerUrl = ref(props.url);
    const DPlayerRef = ref(null);
    const DPlayerObject = ref(null);
    let containId = ref("video-xgplayer__" + new Date().valueOf());
    let cusVolume = ref(10);
    const initDPlayer = () => {
      let reg = /mp4|webm|ogg|mov|flv|hls|m3u8/;
      const url = DPlayerUrl.value;
      let suffix = reg.test(url) ? url.match(reg)[0].toLowerCase() : null;
      let type = suffix;
      if (DPlayerRef.value) {
        DPlayerPlay(judgeFormat(type), url);
      }
    };
    const DPlayerPlay = (type, url) => {
      DPlayerObject.value = new DPlayer({
        container: DPlayerRef.value,
        ...props,
        volume: cusVolume.value,
        mutex: false,
        video: {
          url,
          pic: posterSrc.value,
          type
        }
      });
    };
    const judgeFormat = (type, url) => {
      let bckVal = "";
      const mp4Types = ["mp4", "webm", "ogg", "mov"];
      const flvTypes = ["flv"];
      const hlsTypes = ["hls", "m3u8"];
      if (hlsTypes.includes(type)) {
        bckVal = "hls";
      } else if (flvTypes.includes(type)) {
        bckVal = "flv";
      } else if (mp4Types.includes(type)) {
        bckVal = "normal";
      }
      return bckVal;
    };
    watchEffect(() => {
      if (DPlayerObject.value) {
        DPlayerUrl.value = props.url;
        cusVolume.value = Number(props.volume) / 100;
        initDPlayer();
      }
    });
    watchEffect(() => {
      if (DPlayerObject.value) {
        const dpBox = DPlayerObject.value.video.parentNode.parentNode;
        const ele = dpBox.querySelector(".dplayer-controller");
        cusControls.value ? ele.style.display = "block" : ele.style.display = "none";
      }
    });
    onMounted(() => {
      initDPlayer();
    });
    return {
      containId,
      DPlayerRef,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = { class: "co-video-DPlayer" };
const _hoisted_2 = ["id"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", _hoisted_1, [
    createElementVNode("div", {
      id: _ctx.containId,
      ref: "DPlayerRef",
      class: normalizeClass(["video-DPlayer__main", _ctx.ratio])
    }, null, 10, _hoisted_2)
  ]);
}
var LabelText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-825af7f4"]]);
export { LabelText as default };