barrage

Intro

To realize the critical subtitle function when watching the video.

Setup

ohpm install @ohmos/barrage

Usage

• Reference effect

• Sample code

import { Barrage, BarrageController, BarrageItem } from '@ohmos/barrage';

@Entry
@Component
struct Index {
  @State items: BarrageItem[] = [
    { id: 100, text: '弹幕' },
    { id: 200, text: 'Harmony', fontColor: '#ff0000' },
    { id: 300, text: 'Next' },
    { id: 400, text: '星河版' },
    { id: 500, text: '测试', fontColor: '#0000ff' },
    { id: 600, text: 'OHMOS' },
  ];
  controller: BarrageController = new BarrageController()

  build() {
    Column({ space: 15 }) {

      Barrage({ barrageItems: this.items, controller: this.controller, autoPlay: false })

      Row({ space: 15 }) {
        Button('弹幕')
          .onClick(() => {
            this.items.push({
              id: Math.random(),
              text: 'Barrage'
            })
          })
        Button('暂停')
          .onClick(() => {
            this.controller.pause()
          })

        Button('开始')
          .onClick(() => {
            this.controller.play()
          })
      }
    }
    .height('100%')
    .width('100%')
  }
}

Other

You can see https://github.com/HarmonyOS-Next