纯血鸿蒙APP第三方库——视频弹幕实战

原创

小帅聊鸿蒙

发布于 2025-01-21 17:16:28

1370

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

介绍

本示例介绍如何使用 @ohos.danmakuflamemaster 和 @ohos.gsyvideoplayer 开发支持视频弹幕的播放器。可以自定义弹幕样式、占据屏幕宽度，发送弹幕，开关弹幕视图。

效果图预览

使用说明

点击播放按钮，进行视频播放，弹幕自动开启
点击“弹幕关”按钮，关闭弹幕
点击“发送弹幕”按钮，发送一条弹幕，弹幕内容为“这是一条弹幕”+当前时间戳

实现思路

初始化播放器

videoInit: (iVideoPlayer: IVideoPlayer, xid: string) => void = (iVideoPlayer: IVideoPlayer, xid: string) => {
  this.mIVideoPlayer = iVideoPlayer;
  this.xComponentId = xid;
  this.mIVideoPlayer.setUp(this.videoModel.getUrl(), this.videoModel.getCacheWithPlay());
}

初始化弹幕

danmuInit() {
  let maxLinesPair: Map<number, number> = new Map();
  maxLinesPair.set(BaseDanmaku.TYPE_SCROLL_RL, 5); // 滚动弹幕最大显示5行
  // 设置是否禁止重叠
  let overlappingEnablePair: Map<number, boolean> = new Map();
  ...
  this.mContext = DanmakuContext.create();
  //设置弹幕样式
  this.mContext.setDanmakuStyle(DANMAKU_STYLE_STROKEN, 3)
    .setDuplicateMergingEnabled(false)
  ...
  if (this.model != null) {
    this.mParser = this.createParser();
    this.model.setCallback(new Call(that));
    // 设置弹幕点击事件监听
    this.model.setOnDanmakuClickListener(new OnDanMu(that));
    ...
  }
}

添加弹幕

/*
 * 使用BaseDanmaku类初始化弹幕实例，并设定一系列弹幕的参数值，包括弹幕内容、样式等
 * 添加到提前实例化的弹幕模型model对象上
 */
private addDanmaku(isLive: Boolean) {
  if (this.mContext) {
    let danmaku: BaseDanmaku = this.mContext.mDanmakuFactory.createDanmaku(BaseDanmaku.TYPE_SCROLL_RL);
    danmaku.text = "这是一条弹幕" + SystemClock.uptimeMillis();
    danmaku.padding = 5;
    danmaku.priority = 0; // 可能会被各种过滤器过滤并隐藏显示
    danmaku.isLive = isLive.valueOf();// 是否为在线弹幕
    danmaku.setTime(this.model.getCurrentTime() + 1200);
    if (this.mParser) {
      danmaku.textSize = 25 * (this.mParser.getDisplayer().getDensity() * 0.8);
    }
    danmaku.textColor = 0xffff0000;
    danmaku.textShadowColor = 0xffffffff;
    danmaku.borderColor = 0xff00ff00;
    this.model.addDanmaku(danmaku);
  }
}

解析弹幕

/*
 * DanmakuParser类中包含了对弹幕数据的解析方法，解析每条弹幕的开始/结束时间、样式、内容等
 */
private createParser(): BaseDanmakuParser {
  let parser: BaseDanmakuParser = new DanmukuParser();
  let jsonSource = new JSONSource(sourceData);
  parser.load(jsonSource);
  return parser;
}

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到以下内容：`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

本地自定义弹幕数据文件，格式如下

{
  "DanmakuType":4,
  "alphaDuration":0,
  "beginAlpha":0,
  "beginX":0,
  "beginY":0,
  "duration":0,
  "endAlpha":0,
  "endX":0,
  "endY":0,
  "index":1,
  "isQuadraticEaseOut":false,
  "rotationY":0,
  "rotationZ":0,
  "text":"hhhhhhhhh",
  "textColor":-9946501,
  "textShadowColor":-16777216,
  "textSize":25,
  "time":219370,
  "timeOffset":0,
  "translationDuration":0,
  "translationStartDelay":0
}

创建video的播放、初始化以及暂停事件的emitter，在对应事件开启监听

let videoPlayEvent: emitter.InnerEvent = {
  eventId: 1
};
let videoInitEvent: emitter.InnerEvent = {
  eventId: 2
};
let videoPauseEvent: emitter.InnerEvent = {
  eventId: 3
};

高性能知识点

不涉及

工程结构&模块类型

danmakuplayer                          // har类型
|---/src/main/ets/model                        
|   |---DanmakuData.ets                // 数据模型层-列表数据模型 
|   |---DanmakuParser.ets              // 数据模型层-列表项数据模型
|---/src/main/ets/view                        
|   |---VideoView.ets                  // 视图层-场景列表页面