HarmonyOS NEXT开发：视频弹幕功能

叮当猫QAQ

于 2024-07-28 21:25:49 发布

阅读量400

点赞数 13

分类专栏：鸿蒙鸿蒙实战文章标签： harmonyos 华为 android 鸿蒙前端

本文链接：https://blog.csdn.net/dingdangmaoQAQ/article/details/140756654

版权

鸿蒙同时被 2 个专栏收录

90 篇文章 0 订阅

订阅专栏

鸿蒙实战

90 篇文章 0 订阅

订阅专栏

介绍

本示例介绍如何使用@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;
}

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

{
  "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/common                        
|   |---Constants.ets                  // 常量数据
|---/src/main/ets/model                        
|   |---DanmakuData.ets                // 弹幕mock数据 
|   |---DanmakuParser.ets              // 弹幕解析类
|   |---DanmakuVideoPlayer.ets         // 视频弹幕播放器
|---/src/main/ets/view                        
|   |---VideoView.ets                  // 视频弹幕播放页面

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料