bili-player v0.0.5

效果图

快速开始

npm i bili-player

<template>
  <bili-player
    ref="biliPlayerRef"
    style="width: 900px; height: 550px"
    v-bind="playerProps"
  />
</template>

<script setup lang="ts">
import "bili-player/style.css";
import { onMounted, ref } from "vue";
import {
  BiliPlayer,
  type BiliDanmakuItem,
  type BiliPlayerProps,
} from "bili-player";

const biliPlayerRef = ref<InstanceType<typeof BiliPlayer>>();
const playerProps: BiliPlayerProps = {
  video: {
    poster: "https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png",
    url: "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
    autoplay: true,
  },
  danmaku: {
    sendCallback: async (data: BiliDanmakuItem) => {
      // request send
    },
    filter: (data: BiliDanmakuItem) => {
      // 屏蔽弹幕 '前方高能'
      return !data.content.includes("前方高能");
    },
  },
};

const danmaItems: BiliDanmakuItem[] = [
  { content: "君だよ 君なんだよ  教えてくれた", time: 1, type: 0, color: "white" },
  { content: "Goose house炒鸡棒！！！  银之匙种草他们组合", time: 1.2, type: 2, color: "red" },
  { content: "朱军，拔剑吧", time: 1.6, type: 0, color: "green" },
  { content: "听了好多次", time: 6.6, type: 1, color: "white" },
  { content: "带耳机听，贝斯的声音会更加带感！", time: 4.3, type: 0, color: "black" },
  { content: "胖子哥声音太美", time: 3.2, type: 1, color: "white" },
  { content: "练习室版本吧。就像live和专辑。", time: 3.6, type: 0, color: "white" },
  { content: "左下角的妹子唱副歌的，很难的", time: 2.2, type: 1, color: "blue" },
];
onMounted(() => {
  const danmaControl = biliPlayerRef.value?.getDanmaControls();
  danmaControl?.setDanmakus(danmaItems);
});
</script>

参数说明

API说明