vue-bilibili-embed-renderer-oxr/dist/index.es.js

It is better to use Bilibili's embed renderer component for Vue applications,update bv

import { defineComponent, openBlock, createElementBlock, unref, normalizeClass } from "vue";
const calcHeight = (width, height, aspectWidth, aspectHeight) => {
  if (height) {
    return height;
  }
  if (typeof width === "number") {
    return width * aspectHeight / aspectWidth;
  } else if (typeof width === "string" && width.search("px") !== -1) {
    const widthNum = Number(width.replace("px", ""));
    return widthNum * aspectHeight / aspectWidth;
  } else if (typeof width === "string" && width === "100%") {
    return "100%";
  }
  return 360;
};
const isBrowser = !!(typeof window !== "undefined" && window.document && window.document.createElement);
const _hoisted_1 = ["width", "height", "src"];
const bilibiliUrl = "//player.bilibili.com/player.html";
const _sfc_main = defineComponent({
  __name: "core",
  props: {
    vid: {
      type: String,
      require: true
    },
    autoplay: {
      type: Boolean,
      require: false
    },
    page: {
      type: Number,
      require: false
    },
    isWide: {
      type: Boolean,
      require: false
    },
    highQuality: {
      type: Boolean,
      require: false
    },
    hasDanmaku: {
      type: Boolean,
      require: false
    },
    aspectWidth: {
      type: Number,
      require: false
    },
    aspectHeight: {
      type: Number,
      require: false
    },
    width: {
      type: String || Number,
      require: false
    },
    height: {
      type: String || Number,
      require: false
    },
    iframeClass: {
      type: String,
      require: false
    }
  },
  setup(__props) {
    let props = __props;
    const { vid, autoplay } = props;
    const page = props.page || 1;
    const isWide = props.isWide || true;
    const highQuality = props.highQuality || true;
    const hasDanmaku = props.hasDanmaku || false;
    const defaultAspectWidth = isBrowser ? 4 : 16;
    const defaultAspectHeight = isBrowser ? 3 : 9;
    const aspectWidth = props.aspectWidth || defaultAspectWidth;
    const aspectHeight = props.aspectHeight || defaultAspectHeight;
    const width = props.width || 480;
    const height = calcHeight(width, props.height, aspectWidth, aspectHeight);
    const iframeClassImp = props.iframeClass || "";
    const highQualityValue = highQuality ? 1 : 0;
    const wideValue = isWide ? 1 : 0;
    const danmakuValue = hasDanmaku ? 1 : 0;
    let aid = "", bvid = "";
    const lvid = vid.toLocaleLowerCase();
    lvid.startsWith("bv") ? bvid = vid : aid = vid;
    const iframeSrc = bvid ? `${bilibiliUrl}?bvid=${bvid}&page=${page}&high_quality=${highQualityValue}&as_wide=${wideValue}&danmaku=${danmakuValue}&autoplay=${autoplay ? 1 : 0}` : `${bilibiliUrl}?aid=${aid}&page=${page}&high_quality=${highQualityValue}&as_wide=${wideValue}&danmaku=${danmakuValue}&autoplay=${autoplay ? 1 : 0}`;
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("iframe", {
        width: unref(width),
        height: unref(height),
        src: unref(iframeSrc),
        allowFullScreen: true,
        class: normalizeClass({ iframeClassImp: unref(iframeClassImp) })
      }, null, 10, _hoisted_1);
    };
  }
});
_sfc_main.install = (app) => {
  app.component("bilibili-embed-renderer", _sfc_main);
};
export { _sfc_main as default };