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

简介

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

效果展示：

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  # 安装使用方法