uni-app 视频内置弹幕发送功能需求

实现uni-app视频内置弹幕发送功能，可以通过结合video组件和自定义弹幕组件来完成。以下是一个简化的代码示例，展示如何在uni-app中实现这一功能。

1. 页面布局（pages/index/index.vue）

首先，创建一个页面，其中包含一个video组件用于播放视频，以及一个自定义组件用于显示弹幕。

<template>
  <view class="container">
    <video
      id="video"
      src="your-video-url.mp4"
      controls
      @play="onVideoPlay"
    ></video>
    <danmaku :danmakuList="danmakuList" />
    <view class="input-container">
      <input v-model="inputText" placeholder="输入弹幕内容" />
      <button @click="sendDanmaku">发送弹幕</button>
    </view>
  </view>
</template>

<script>
import Danmaku from '@/components/Danmaku.vue';

export default {
  components: { Danmaku },
  data() {
    return {
      danmakuList: [],
      inputText: '',
    };
  },
  methods: {
    onVideoPlay() {
      // 视频开始播放时，可以初始化一些状态
    },
    sendDanmaku() {
      if (this.inputText.trim()) {
        this.danmakuList.push({
          text: this.inputText,
          time: new Date().getTime(), // 使用当前时间作为弹幕出现的时间戳
        });
        this.inputText = '';
      }
    },
  },
};
</script>

<style>
.container {
  position: relative;
}
.input-container {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
</style>

2. 弹幕组件（components/Danmaku.vue）

创建一个自定义组件Danmaku.vue，用于显示弹幕列表。

<template>
  <view class="danmaku-container">
    <view
      v-for="(danmaku, index) in filteredDanmakuList"
      :key="index"
      class="danmaku"
      :style="danmakuStyle(danmaku)"
    >
      {{ danmaku.text }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    danmakuList: {
      type: Array,
      required: true,
    },
  },
  computed: {
    filteredDanmakuList() {
      const currentTime = new Date().getTime();
      return this.danmakuList.filter(danmaku => currentTime - danmaku.time < 10000); // 只显示最近10秒的弹幕
    },
  },
  methods: {
    danmakuStyle(danmaku) {
      const elapsedTime = (new Date().getTime() - danmaku.time) / 1000;
      const position = `left: ${100 - elapsedTime * 10}vw;`; // 简单的位置计算，可以根据需要调整
      return position;
    },
  },
};
</script>

<style>
.danmaku-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none; /* 确保弹幕层不会阻挡用户交互 */
}
.danmaku {
  position: absolute;
  white-space: nowrap;
  color: white;
  font-size: 18px;
}
</style>

以上代码提供了一个基本的uni-app视频内置弹幕发送功能的实现。实际应用中，你可能需要根据具体需求进行更多优化，比如增加弹幕速度控制、样式定制、碰撞检测等。