Barrage 弹幕

介绍

实现观看视频时弹出的评论性字幕功能。

基础用法

可以通过 v-model 双向绑定弹幕数据，Barrage 会在组件区域内播放文字弹幕，使用数组数据 push() 可以发送弹幕文字。

<z-barrage v-model="list">
  <view class="video"></view>
</z-barrage>
<view style="margin-top: 20rpx">
  <z-button @click="add" type="primary" size="small"> 弹幕 </z-button>
</view>

import { ref, watch } from 'vue'
const defaultList = [
  { id: 11, text: 'zebra-ui' },
  { id: 12, text: '666666' },
  { id: 13, text: '哈哈哈哈哈哈' },
  { id: 14, text: 'uniapp' },
  { id: 15, text: 'zebra-swiper' },
  { id: 16, text: '嘻嘻嘻' },
  {
    id: 17,
    text: '这条弹幕很长这条弹幕很长这条弹幕很长这条弹幕很长这条弹幕很长'
  }
]
const list = ref([...defaultList])
const add = () => {
  list.value.push({ id: Math.random(), text: 'Barrage' })
}

模拟视频弹幕

设置 auto-play 为 false 属性后，需要使用 play() 进行弹幕播放，暂停可以使用 pause() 实现。

<z-barrage v-model="videoList" ref="videoBarrage" :auto-play="false">
  <view class="video"></view>
</z-barrage>
<view style="margin-top: 10px">
  <z-button
    @click="videoAdd"
    type="primary"
    size="small"
    :disabled="!isPlay"
  >
    弹幕
  </z-button>
  <z-button
    :custom-style="{ 'margin-left': '20rpx' }"
    @click="toggle()"
    size="small"
  >
    {{ isPlay ? '暂停' : '播放' }}
  </z-button>
</view>

const videoList = ref([...defaultList])
const videoBarrage = ref()
const videoAdd = () => {
  videoList.value.push({ id: Math.random(), text: 'Barrage' })
}

const isPlay = ref(false)

const toggle = (value = !isPlay.value) => {
  isPlay.value = value
}

watch(isPlay, () => {
  if (isPlay.value) videoBarrage.value?.play()
  else videoBarrage.value?.pause()
})

.demo-barrage {
  .video {
    width: 100%;
    height: 300rpx;
    background-color: var(--z-gray-2);
  }
}

Props

方法

通过 ref 可以获取到 Barrage 实例并调用实例方法。

Slots

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。