Vue2实现发送弹幕的功能

实现弹幕功能需要借助一些库，这里以使用 `DPlayer` 播放器和 `Danmaku` 弹幕库为例进行讲解。

1. 安装 `DPlayer` 和 `Danmaku`：

npm install dplayer danmaku

2. 在 Vue 中引入 `DPlayer` 和 `Danmaku`：

<template>
  <div class="player-container">
    <div ref="player"></div>
    <div class="danmaku-input">
      <input type="text" v-model="danmakuText" placeholder="请输入弹幕内容" />
      <button @click="sendDanmaku">发送</button>
    </div>
  </div>
</template>

<script>
import DPlayer from 'dplayer';
import Danmaku from 'danmaku';

export default {
  data() {
    return {
      danmakuText: '',
      danmaku: null,
    };
  },
  mounted() {
    this.initPlayer();
  },
  methods: {
    // 初始化 DPlayer 播放器和 Danmaku 弹幕库
    initPlayer() {
      const options = {
        video: {
          url: 'your_video_url',
        },
      };
      const player = new DPlayer({
        container: this.$refs.player,
        ...options,
      });
      this.danmaku = new Danmaku(player.video, player.danmaku, options);
    },
    // 发送弹幕
    sendDanmaku() {
      if (!this.danmakuText) return;
      const danmakuItem = {
        type: 'right', // 弹幕位置
        text: this.danmakuText, // 弹幕内容
        color: '#fff', // 弹幕颜色
        time: this.danmaku.video.currentTime, // 弹幕出现时间
      };
      this.danmaku.send(danmakuItem);
      this.danmakuText = '';
    },
  },
};
</script>

3. 在 `sendDanmaku` 方法中，我们创建一个弹幕对象 `danmakuItem`，设置弹幕的位置、内容、颜色和出现时间，然后调用 `Danmaku` 实例的 `send` 方法发送弹幕。

注意：在上面的代码中，`your_video_url` 需要替换为你的视频地址。