【鸿蒙HarmonyOS Next实战开发】多媒体视频播放-GSYVideoPlayer

简介

GSYVideoPlayer是一个视频播放器库，支持切换内核播放器（IJKPlayer、avplayer），并且支持视频截图能力、视频生成gif能力、边播边缓存能力、视频全屏能力等多种能力。

效果展示：

下载安装

ohpm install @ohos/gsyvideoplayer

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

使用说明

规格说明

目前支持音视频规格：由于本库播放音视频能力底层是avplayer或者ijkplayer去播放视频，所以支持的音视频规格跟随这两个库音视频规格。

avplayer规格说明

ijkplayer规格说明

使用标准播放器

设置内核播放器

可以在视频播放之前选择使用avplayer或者ijkplayer去播放视频。

import { GlobalContext } from '@ohos/gsyvideoplayer'

aboutToAppear() {
GlobalContext.getContext().setObject("playType", PlayerType.SYSTEM_AVPLAYER);
}

构建StandardGSYVideoModel对象:

videoModel: StandardGSYVideoModel = new StandardGSYVideoModel();
aboutToAppear() {
// 设置播放的url，设置播放不缓存
this.videoModel.setUrl(this.videoUrl, false);
this.videoModel.setTitle("这是测试视频的标题");
this.videoModel.setBackClickListener(this.backClickListener);
this.videoModel.setFullClickListener(this.fullClickListener);
this.videoModel.setCoverImage($r('app.media.app_icon'));
}
界面build()中使用StandardGSYVideoPlayer组件，传入StandardGSYVideoModel对象

build() {
Row() {
Column() {
StandardGSYVideoPlayer({
videoModel: this.videoModel
}).height(this.screenHeight)
```
   }.width('100%')
```
}
}
在@Entry标签的界面生命周期需要控制播放器的播放状态

aboutToDisappear() {
let player = GlobalContext.getContext().getObject("currentPlayer") as BaseVideoPlayer;
if (player) {
player.stop();
}
}

onPageShow() {
let player = GlobalContext.getContext().getObject("currentPlayer") as BaseVideoPlayer;
if (player) {
player.resumePlay();
}
}

onPageHide() {
let player = GlobalContext.getContext().getObject("currentPlayer") as BaseVideoPlayer;
if (player) {
player.pause();
}
}

视频截图能力

Button("点击截图").onClick(() => {
  let player = GlobalContext.getContext().getObject("currentPlayer") as BaseVideoPlayer;
  if (player) {
    let path = getContext(this).cacheDir + "/test.jpeg";
    player.saveFrame(path, {
      shotResult(code: number) {
        promptAction.showToast({
          message: code == 0 ? "截图操作成功" : "截图操作失败"
        });
      }
    })
  }
})

视频生成gif能力

Button("startGif").onClick(() => {
  let player = GlobalContext.getContext().getObject("currentPlayer") as BaseVideoPlayer;
  if (player) {
    let path = getContext(this).cacheDir + "/tempGif";
    player.startGif(path);
    promptAction.showToast({
      message: "开始gif截图"
    });
  }
})

Button("stopGif").onClick(() => {
  let player = GlobalContext.getContext().getObject("currentPlayer") as BaseVideoPlayer;
  if (player) {
    this.dialogController.open();
    let path = getContext(this).cacheDir + "/gifTest.gif";
    let that = this;
    player.stopGif(path, {
      gifResult(code: number) {
        that.dialogController.close();
        promptAction.showToast({
          message: code == 0 ? "gif截图成功" : "gif截图失败"
        });
      }
    })
  }
})

边播边缓存能力

可以在构建StandardGSYVideoModel对象时，控制是否需要边播边缓存。

  videoModel: StandardGSYVideoModel = new StandardGSYVideoModel();
  aboutToAppear() {
  // 设置播放的url，设置播放不缓存
  this.videoModel.setUrl(this.videoUrl, false);
}

视频全屏能力

可以在构建StandardGSYVideoModel对象时，设置全屏回调接口，全屏逻辑由用户控制。

    fullClickListener: () => void = () => {
      
    }
  videoModel: StandardGSYVideoModel = new StandardGSYVideoModel();
  aboutToAppear() {
  // 设置播放的url，设置播放不缓存
  this.videoModel.setUrl(this.videoUrl, false);
  this.videoModel.setFullClickListener(this.fullClickListener);
}

接口说明

StandardGSYVideoModel

方法名	入参	接口描述
setUrl(videoUrl: string, cacheWithPlay?: boolean)	videoUrl: string, cacheWithPlay?: boolean	设置播放url,设置是否边播边缓存
setTitle(title: string)	title: string	设置视频全屏时的标题
setBackClickListener(backClickListener: () => void)	backClickListener: () => void	设置点击播放器返回按钮的回调接口
setFullClickListener(fullClickListener: () => void)	fullClickListener: () => void	设置点击播放器全屏按钮的回调接口
setCoverImage(coverImage:Resource)	coverImage:Resource	设置封面接口

IVideoPlayer

方法名	入参	接口描述
play();	无	视频开始播放
resumePlay()	无	视频恢复播放
pause()	无	视频暂停播放
stop()	无	视频停止播放
saveFrame(fileSavePath: string, gsyVideoShotSaveListener: GSYVideoShotSaveListener)	fileSavePath: string, gsyVideoShotSaveListener: GSYVideoShotSaveListener	视频截图
startGif(tmpPicPath?: string)	tmpPicPath?: string	视频开始gif
stopGif(saveGifPath: string, gsyVideoGifSaveListener: GSYVideoGifSaveListener)	无	视频结束gif,并生成gif

约束与限制

在下述版本验证通过：

DevEco Studio:NEXT Developer Beta1(5.0.3.326), SDK: API12 (5.0.0.25) DevEco Studio:NEXT Beta1-5.0.3.806, SDK: API12 Release (5.0.0.66)

目录结构

|---- GSYVideoPlayer  
|     |---- entry  # 示例代码文件夹
            |---- pages
                |---- BiliDanmukuParser.ets  # 弹幕解析类
                |---- DanmakuData.ets  # 弹幕数据
                |---- DanmakuVideoDemo.ets  # 弹幕demo
                |---- DanmakuVideoPlayer.ets  # 弹幕播放器
                |---- Index.ets  # 首页
                |---- PlayNetWithCacheDemo.ets  # 边播放边缓存demo
                |---- PlayNetWithNoCacheDemo.ets  # 边播放不缓存demo
                |---- PlayWithCacheDemo.ets  # 播放缓存入口
                |---- SimpleDemo.ets  # 简单播放测试demo
                |---- SimpleList.ets  # 简单视频列表demo
|     |---- library  # GSYVideoPlayer核心代码
            |---- listener  # 接口回调类
                |---- GSYVideoGifSaveListener.ets  # stopGif接口回调类
                |---- GSYVideoShotSaveListener.ets  # 截图接口回调类
            |---- mainpage  # 核心实现
                |---- AvPlayerControl.ets  # avplayer逻辑控制类
                |---- AvVideoPlayer.ets  # avplayer播放器
                |---- BaseVideoPlayer.ets  # 播放器控制基类
                |---- CommonConstants.ets # 常量类
                |---- GlobalContext.ts  # 全局配置类
                |---- IjkPlayerControl.ets  # ijkplayer逻辑控制类
                |---- IjkVideoPlayer.ets  # ijkplayer播放器
                |---- StandardForListGSYVideoPlayer.ets  # 为list页面使用的播放器
                |---- StandardGSYVideoModel.ets  # 标准播放器
                |---- StandardGSYVideoPlayer.ets  # 播放器数据配置类
            |---- utils  # 工具类
                |---- OrientationUtil.ets  # 屏幕方向控制类
                |---- LogUtils.ets  # log工具类
|     |---- README.md  # 安装使用方法
|     |---- README_zh.md  # 安装使用方法