想要在博客页面插入 B 站视频? 带你手把手开发一个简单的 B 站视频组件

---

视频组件示例

实现

在 components 创建一个名为 BiliVideo 的组件,然后写入如下代码:

<script setup lang="ts">
const props = defineProps({
  bvid: String,
});

const getUrl = () => {
  return (
    "//player.bilibili.com/player.html?isOutside=true&autoplay=0&bvid=" +
    props.bvid
  );
};
</script>

<template>
  <div class="w-full h-96 mt-5">
    <iframe
      :src="getUrl()"
      scrolling="no"
      border="0"
      frameborder="no"
      framespacing="0"
      allowfullscreen="true"
      width="100%"
      height="100%"
    >
    </iframe>
  </div>
</template>

然后在你想插入博客使用该组件

<script setup>
import BiliVideo from "../components/BiliVideo.vue";
</script>
<BiliVideo bvid="BV1q3411b7ps" />

你只需要填入对应的 bvid 即可